11---
22title: "{{ event_title }}"
3- tags:
4- {% for tag in tags %}
5- - {{ tag.name }}
6- {% endfor %}
73---
84
95# Meetup #PythonCDMX <i class =" fab fa-python" ></i > - {{ event_month_year }}
106
11- <div class =" event-highlight " style = " background : linear-gradient ( 135 deg , #667eea 0 % , #764ba2 100 % ); color : white ; padding : 2 rem ; border-radius : 16 px ; margin : 2 rem 0 ; text-align : center ; box-shadow : 0 8 px 32 px rgba ( 102 , 126 , 234 , 0.3 ); " >
12- <h2 style = " margin : 0 0 1 rem 0 ; font-size : 2.5 rem ; " > {{ event_title }}</ h2 >
13- <p style = " font-size : 1.2 rem ; margin : 0 ; opacity : 0.9 ; " >{{ event_subtitle }}</p >
7+ <div class =" meetup-hero " >
8+ <h1 >✨ {{ event_title }} ✨</ h1 >
9+ <p class = " meetup-subtitle " >{{ event_subtitle if event_subtitle else 'Descubre las mejores prácticas para configurar tu entorno de desarrollo Python' }}</p >
1410</div >
1511
16- <div class =" meetup-header" style =" text-align : center ; margin-bottom : 2rem ;" >
17- <img src =" /../../{{ event_banner_image | replace('/images/', 'images/') }}" alt =" Banner del evento" style =" max-width : 100% ; border-radius : 12px ; box-shadow : 0 4px 20px rgba (0 ,0 ,0 ,0.1 );" >
18- </div >
19-
20-
21-
2212## Información del Evento
2313
24- <div class =" event-details" style = " display : grid ; grid-template-columns : repeat ( auto-fit , minmax ( 250 px , 1 fr )); gap : 1.5 rem ; margin : 2 rem 0 ; " >
25- <div class =" detail-card" style = " background : #f8f9fa ; padding : 1.5 rem ; border-radius : 12 px ; border-left : 4 px solid #28a745 ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ); " >
26- <h3 style = " margin : 0 0 0.5 rem 0 ; color : #28a745 ; " ><i class =" fas fa-calendar" ></i > Fecha</h3 >
27- <p style = " margin : 0 ; font-size : 1.1 rem ; font-weight : 600 ; " >{{ event_date }}</p >
14+ <div class =" event-details" >
15+ <div class =" detail-card date-card " >
16+ <h3 ><i class =" fas fa-calendar-alt " ></i > Fecha</h3 >
17+ <p >{{ event_date }}</p >
2818 </div >
29- <div class =" detail-card" style = " background : #f8f9fa ; padding : 1.5 rem ; border-radius : 12 px ; border-left : 4 px solid #007bff ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ); " >
30- <h3 style = " margin : 0 0 0.5 rem 0 ; color : #007bff ; " ><i class =" fas fa-clock" ></i > Hora</h3 >
31- <p style = " margin : 0 ; font-size : 1.1 rem ; font-weight : 600 ; " >{{ event_time }}</p >
19+ <div class =" detail-card time-card " >
20+ <h3 ><i class =" fas fa-clock" ></i > Hora</h3 >
21+ <p >{{ event_time }}</p >
3222 </div >
33- <div class =" detail-card" style = " background : #f8f9fa ; padding : 1.5 rem ; border-radius : 12 px ; border-left : 4 px solid #dc3545 ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ); " >
34- <h3 style = " margin : 0 0 0.5 rem 0 ; color : #dc3545 ; " ><i class =" fas fa-map-marker-alt" ></i > Lugar</h3 >
35- <p style = " margin : 0 ; font-size : 1.1 rem ; font-weight : 600 ; " >{{ event_location }}</p >
23+ <div class =" detail-card location-card " >
24+ <h3 ><i class =" fas fa-map-marker-alt" ></i > Lugar</h3 >
25+ <p >{{ event_location }}</p >
3626 </div >
37- <div class =" detail-card" style = " background : linear-gradient ( 135 deg , #28a745 0 % , #20c997 100 % ); color : white ; padding : 1.5 rem ; border-radius : 12 px ; border-left : 4 px solid #28a745 ; box-shadow : 0 4 px 16 px rgba ( 40 , 167 , 69 , 0.3 ); " >
38- <h3 style = " margin : 0 0 0.5 rem 0 ; color : white ; " ><i class =" fas fa-gift" ></i > ¡GRATIS!</h3 >
39- <p style = " margin : 0 ; font-size : 1.1 rem ; font-weight : 600 ; " >Entrada completamente gratuita</p >
27+ <div class =" detail-card free-card " >
28+ <h3 ><i class =" fas fa-gift" ></i > ¡GRATIS!</h3 >
29+ <p >Entrada completamente gratuita</p >
4030 </div >
41- <div class =" detail-card" style = " background : #f8f9fa ; padding : 1.5 rem ; border-radius : 12 px ; border-left : 4 px solid #ffc107 ; box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ); " >
42- <h3 style = " margin : 0 0 0.5 rem 0 ; color : #ffc107 ; " ><i class =" fas fa-ticket-alt" ></i > RSVP</h3 >
43- <p style = " margin : 0 ; font-size : 1.1 rem ; font-weight : 600 ; " ><a href =" {{ event_rsvp_link }}" style =" color : #ffc107 ; text-decoration : none ;" >¡Regístrate aquí!</a ></p >
31+ <div class =" detail-card rsvp-card " >
32+ <h3 ><i class =" fas fa-ticket-alt" ></i > RSVP</h3 >
33+ <p ><a href =" {{ event_rsvp_link }}" style =" color : #ffc107 ; text-decoration : none ;" >¡Regístrate aquí!</a ></p >
4434 </div >
4535</div >
4636
@@ -54,26 +44,23 @@ tags:
5444 <h3 style =" margin : 0 0 0.5rem 0 ; font-size : 1.8rem ;" ><i class =" fas fa-rocket" ></i > {{ talk.title }}</h3 >
5545 {% if talk .duration %} <p style =" margin : 0 ; opacity : 0.9 ;" ><i class =" fas fa-stopwatch" ></i > {{ talk.duration }}</p >{% endif %}
5646 </div >
57-
5847 <div class =" speaker-section" style =" background : linear-gradient (135deg , #f8f9fa 0% , #e9ecef 100% ); padding : 2rem ; display : flex ; align-items : center ; gap : 2rem ;" >
5948 <div class =" speaker-photo" style =" flex-shrink : 0 ;" >
60- <img src =" /../../{{ talk.speaker.photo | replace ('/images/', 'images/') }}" alt =" {{ talk.speaker.name }}" style =" width : 120px ; height : 120px ; border-radius : 50% ; border : 4px solid white ; box-shadow : 0 4px 16px rgba (0 ,0 ,0 ,0.2 ); object-fit : cover ;" >
49+ <img src =" /../../images/ponentes/ {{ talk.speaker.photo.split ('/')[-1] }}" alt =" {{ talk.speaker.name }}" style =" width : 120px ; height : 120px ; border-radius : 50% ; border : 4px solid white ; box-shadow : 0 4px 16px rgba (0 ,0 ,0 ,0.2 ); object-fit : cover ;" >
6150 </div >
6251 <div class =" speaker-info" >
6352 <h4 style =" margin : 0 0 0.5rem 0 ; font-size : 1.5rem ; color : #333 ;" >{{ talk.speaker.name }}</h4 >
6453 <p style =" margin : 0 0 1rem 0 ; font-size : 1rem ; color : #666 ;" >{{ talk.speaker.title }}</p >
6554 <p style =" margin : 0 0 1rem 0 ; line-height : 1.6 ; color : #555 ;" >{{ talk.speaker.bio }}</p >
6655 <div class =" speaker-links" >
67- {% if talk .speaker .linkedin %} <a href =" {{ talk.speaker.linkedin }}" style = " background : #0077b5 ; color : white ; padding : 0.4 rem 0.8 rem ; border-radius : 20 px ; text-decoration : none ; font-weight : 600 ; display : inline-block ; margin-right : 0.5 rem ; font-size : 0.9 rem ; " ><i class =" fab fa-linkedin" ></i > LinkedIn </a >{% endif %}
68- {% if talk .speaker .github %} <a href =" {{ talk.speaker.github }}" style = " background : #333 ; color : white ; padding : 0.4 rem 0.8 rem ; border-radius : 20 px ; text-decoration : none ; font-weight : 600 ; display : inline-block ; margin-right : 0.5 rem ; font-size : 0.9 rem ; " ><i class =" fab fa-github" ></i > GitHub </a >{% endif %}
69- {% if talk .speaker .twitter %} <a href =" {{ talk.speaker.twitter }}" style = " background : #1DA1F2 ; color : white ; padding : 0.4 rem 0.8 rem ; border-radius : 20 px ; text-decoration : none ; font-weight : 600 ; display : inline-block ; margin-right : 0.5 rem ; font-size : 0.9 rem ; " ><i class =" fab fa-twitter" ></i > Twitter </a >{% endif %}
56+ {% if talk .speaker .linkedin %} <a href =" {{ talk.speaker.linkedin }}" ><i class =" fab fa-linkedin" ></i ></a >{% endif %}
57+ {% if talk .speaker .github %} <a href =" {{ talk.speaker.github }}" ><i class =" fab fa-github" ></i ></a >{% endif %}
58+ {% if talk .speaker .twitter %} <a href =" {{ talk.speaker.twitter }}" ><i class =" fab fa-twitter" ></i ></a >{% endif %}
7059 </div >
7160 </div >
7261 </div >
73-
7462 <div class =" talk-description" style =" background : white ; padding : 2rem ; border-left : 6px solid #28a745 ;" >
7563 <p style =" line-height : 1.8 ; font-size : 1.1rem ; margin-bottom : 1.5rem ; color : #333 ;" >{{ talk.description }}</p >
76-
7764 {% if talk .tech_stack %}
7865 <div class =" tech-stack" style =" display : grid ; grid-template-columns : repeat (auto-fit , minmax (180px , 1fr )); gap : 1rem ; margin : 1.5rem 0 ;" >
7966 {% for tech in talk .tech_stack %}
8471 {% endfor %}
8572 </div >
8673 {% endif %}
87-
8874 <p style =" line-height : 1.8 ; font-size : 1.1rem ; margin-top : 1.5rem ; color : #333 ; font-style : italic ;" >{{ talk.conclusion }}</p >
8975 </div >
9076</div >
@@ -93,62 +79,55 @@ tags:
9379---
9480
9581{% if video and video .youtube_id %}
96- ## Video del Meetup
97- <div class =" video-section" style =" text-align : center ; margin : 2rem 0 ;" >
98- <div style =" background : #f8f9fa ; padding : 2rem ; border-radius : 16px ; box-shadow : 0 4px 16px rgba (0 ,0 ,0 ,0.1 );" >
99- <h3 style =" margin : 0 0 1rem 0 ; color : #dc3545 ;" ><i class =" fas fa-tv" ></i > ¡Mira las charlas completas!</h3 >
100- <div style =" position : relative ; padding-bottom : 56.25% ; height : 0 ; margin-bottom : 1rem ;" >
82+ ## ¡Mira las charlas completas!
83+ <div class =" video-section" >
84+ <div class =" video-container" >
85+ <div class =" video-wrapper" >
10186 <iframe
10287 src =" https://www.youtube.com/embed/{{ video.youtube_id }}"
10388 title =" Meetup PythonCDMX {{ event_month_year }}"
104- style =" position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; border-radius : 12px ;"
10589 frameborder =" 0"
10690 allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
10791 allowfullscreen >
108- </iframe >
92+ > </iframe >
10993 </div >
110- <a href =" {{ video.youtube_url }}" style =" background : #dc3545 ; color : white ; padding : 0.75rem 1.5rem ; border-radius : 25px ; text-decoration : none ; font-weight : 600 ; display : inline-block ; transition : all 0.3s ease ;" ><i class =" fab fa-youtube" ></i > Ver en YouTube</a >
94+ <a href =" {{ video.youtube_url }}" class =" youtube-btn" >
95+ <i class =" fab fa-youtube" ></i > Ver en YouTube
96+ </a >
11197 </div >
11298</div >
11399---
114100{% endif %}
115101
116- ## Temas y Tecnologías
117- <div class =" tags-section" style =" margin : 2rem 0 ;" >
118- <div style =" display : flex ; flex-wrap : wrap ; gap : 0.5rem ; justify-content : center ;" >
119- {% for tag in tags %}
120- <a href =" /tags/{{ tag.name | lower | replace(' ', '-') }}/" style =" background : {{ tag.color }}; color : white ; padding : 0.5rem 1rem ; border-radius : 20px ; font-weight : 600 ; text-decoration : none ; transition : all 0.3s ease ;" >{{ tag.icon | safe }} {{ tag.name }}</a >
121- {% endfor %}
122- </div >
123- </div >
124-
125- ---
126-
127- ## Networking
128- <div class =" networking-section" style =" background : linear-gradient (135deg , #28a745 0% , #20c997 100% ); color : white ; padding : 2rem ; border-radius : 16px ; margin : 2rem 0 ; text-align : center ; box-shadow : 0 8px 32px rgba (40 , 167 , 69 , 0.3 );" >
129- <h3 style =" margin : 0 0 1rem 0 ; font-size : 1.5rem ;" ><i class =" fas fa-comments" ></i > ¡Conecta con la comunidad!</h3 >
130- <p style =" margin : 0 ; font-size : 1.1rem ; line-height : 1.6 ;" >
131- Después de las charlas habrá un tiempo de networking donde podrás platicar con programadores de diferentes niveles e intereses.
132- ¡Es la oportunidad perfecta para hacer conexiones profesionales y aprender de otros desarrolladores!
133- </p >
134- </div >
102+ ### Unete a #PythonCDMX
135103
136- ---
137-
138- ## Enlaces de la Comunidad
139- <div class =" community-links" style =" display : grid ; grid-template-columns : repeat (auto-fit , minmax (200px , 1fr )); gap : 1rem ; margin : 2rem 0 ;" >
140- <a href =" https://t.me/PythonCDMX" style =" background : #0088cc ; color : white ; padding : 1rem ; border-radius : 12px ; text-decoration : none ; text-align : center ; font-weight : 600 ; transition : all 0.3s ease ; display : flex ; align-items : center ; justify-content : center ; gap : 0.5rem ;" >
141- <i class =" fab fa-telegram" ></i > Telegram
142- </a >
143- <a href =" https://www.meetup.com/python-mexico" style =" background : #e51937 ; color : white ; padding : 1rem ; border-radius : 12px ; text-decoration : none ; text-align : center ; font-weight : 600 ; transition : all 0.3s ease ; display : flex ; align-items : center ; justify-content : center ; gap : 0.5rem ;" >
144- <i class =" fab fa-meetup" ></i > Meetup
145- </a >
146- <a href =" https://www.youtube.com/@PythonMexico" style =" background : #ff0000 ; color : white ; padding : 1rem ; border-radius : 12px ; text-decoration : none ; text-align : center ; font-weight : 600 ; transition : all 0.3s ease ; display : flex ; align-items : center ; justify-content : center ; gap : 0.5rem ;" >
147- <i class =" fab fa-youtube" ></i > YouTube
148- </a >
149- <a href =" https://github.com/PythonMexico/pythonCDMX" style =" background : #333 ; color : white ; padding : 1rem ; border-radius : 12px ; text-decoration : none ; text-align : center ; font-weight : 600 ; transition : all 0.3s ease ; display : flex ; align-items : center ; justify-content : center ; gap : 0.5rem ;" >
150- <i class =" fab fa-github" ></i > GitHub
151- </a >
104+ <div class =" community-links" >
105+ {% if community_links %}
106+ {% for link in community_links %}
107+ <a href =" {{ link.url }}" class =" community-link {{ link.class }}" >
108+ {{ link.icon | safe }} {{ link.name }}
109+ </a >
110+ {% endfor %}
111+ {% else %}
112+ <a href =" https://t.me/PythonCDMX" class =" community-link telegram" >
113+ <i class =" fab fa-telegram" ></i > Telegram
114+ </a >
115+ <a href =" https://www.meetup.com/python-mexico" class =" community-link meetup" >
116+ <i class =" fab fa-meetup" ></i > Meetup
117+ </a >
118+ <a href =" https://www.youtube.com/@PythonMexico" class =" community-link youtube" >
119+ <i class =" fab fa-youtube" ></i > YouTube
120+ </a >
121+ <a href =" https://github.com/PythonMexico/pythonCDMX" class =" community-link github" >
122+ <i class =" fab fa-github" ></i > GitHub
123+ </a >
124+ <a href =" https://www.instagram.com/pythoncdmx" class =" community-link instagram" >
125+ <i class =" fab fa-instagram" ></i > Instagram
126+ </a >
127+ <a href =" https://www.linkedin.com/company/pythoncdmx" class =" community-link linkedin" >
128+ <i class =" fab fa-linkedin" ></i > LinkedIn
129+ </a >
130+ {% endif %}
152131</div >
153132
154133---
0 commit comments