1333 lines
		
	
	
		
			48 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			1333 lines
		
	
	
		
			48 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| SafeValue must use [property]=binding: 
 | |
|         <!DOCTYPE html>
 | |
|         <html lang="en">
 | |
|         <head>
 | |
|         <meta charset="UTF-8">
 | |
|         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|         <title>Explore Events</title>
 | |
|         <style id="page-styles">
 | |
|             .nav-1-wrapper {
 | |
|   margin: 0;
 | |
|   font-family: sans-serif;
 | |
| }
 | |
| 
 | |
| .nav-1-navbar {
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   align-items: center;
 | |
|   padding: 16px 40px;
 | |
|   border-bottom: 1px solid #eee;
 | |
| }
 | |
| 
 | |
| .nav-1-logo {
 | |
|   font-family: cursive;
 | |
|   font-size: 24px;
 | |
|   font-weight: bold;
 | |
| }
 | |
| 
 | |
| .nav-1-nav-links {
 | |
|   list-style: none;
 | |
|   display: flex;
 | |
|   gap: 20px;
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| .nav-1-nav-links li a {
 | |
|   text-decoration: none;
 | |
|   color: #111;
 | |
|   font-size: 14px;
 | |
| }
 | |
| 
 | |
| .nav-1-dropdown i {
 | |
|   font-size: 10px;
 | |
|   margin-left: 5px;
 | |
| }
 | |
| 
 | |
| .nav-1-nav-actions {
 | |
|   display: flex;
 | |
|   gap: 10px;
 | |
| }
 | |
| 
 | |
| .nav-1-btn {
 | |
|   padding: 6px 14px;
 | |
|   font-size: 14px;
 | |
|   font-weight: 500;
 | |
|   cursor: pointer;
 | |
|   border: 2px solid #111;
 | |
| }
 | |
| 
 | |
| .nav-1-outline {
 | |
|   background-color: transparent;
 | |
|   color: #111;
 | |
| }
 | |
| 
 | |
| .nav-1-solid {
 | |
|   background-color: #111;
 | |
|   color: #fff;
 | |
| }
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| .footer-2-wrapper {
 | |
|   font-family: sans-serif;
 | |
|   background: #F5F5F5;
 | |
|   padding: 20px;
 | |
| }
 | |
| 
 | |
| .footer-2-section {
 | |
|   background: #fff;
 | |
|   padding: 40px 30px 20px;
 | |
|   border-top: 1px solid #eee;
 | |
| }
 | |
| 
 | |
| .footer-2-top {
 | |
|   display: flex;
 | |
|   flex-wrap: wrap;
 | |
|   gap: 40px;
 | |
|   justify-content: space-between;
 | |
|   margin-bottom: 40px;
 | |
| }
 | |
| 
 | |
| .footer-2-left {
 | |
|   flex: 1 1 300px;
 | |
|   max-width: 350px;
 | |
| }
 | |
| 
 | |
| .footer-2-left .logo {
 | |
|   font-size: 20px;
 | |
|   font-weight: bold;
 | |
|   margin-bottom: 10px;
 | |
| }
 | |
| 
 | |
| .footer-2-left p {
 | |
|   font-size: 14px;
 | |
|   color: #333;
 | |
|   margin: 10px 0;
 | |
| }
 | |
| 
 | |
| .footer-2-left a {
 | |
|   font-size: 14px;
 | |
|   color: #000;
 | |
|   text-decoration: underline;
 | |
| }
 | |
| 
 | |
| .footer-2-social-icons {
 | |
|   margin-top: 12px;
 | |
|   display: flex;
 | |
|   gap: 12px;
 | |
| }
 | |
| 
 | |
| .footer-2-social-icons i {
 | |
|   font-size: 16px;
 | |
|   color: #000;
 | |
|   cursor: pointer;
 | |
| }
 | |
| 
 | |
| .footer-2-links-columns {
 | |
|   flex: 2 1 400px;
 | |
|   display: flex;
 | |
|   gap: 80px;
 | |
|   justify-content: flex-end;
 | |
| }
 | |
| 
 | |
| .footer-2-links-columns ul {
 | |
|   list-style: none;
 | |
|   padding: 0;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| .footer-2-links-columns ul li {
 | |
|   margin-bottom: 8px;
 | |
|   font-size: 14px;
 | |
| }
 | |
| 
 | |
| .footer-2-links-columns ul li a {
 | |
|   text-decoration: none;
 | |
|   color: #000;
 | |
| }
 | |
| 
 | |
| .footer-2-bottom {
 | |
|   border-top: 1px solid #eee;
 | |
|   padding-top: 20px;
 | |
|   display: flex;
 | |
|   flex-wrap: wrap;
 | |
|   justify-content: space-between;
 | |
|   font-size: 13px;
 | |
|   color: #777;
 | |
| }
 | |
| 
 | |
| .footer-2-bottom .footer-2-links {
 | |
|   display: flex;
 | |
|   gap: 20px;
 | |
|   list-style: none;
 | |
|   padding: 0;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| .footer-2-bottom .footer-2-links li a {
 | |
|   text-decoration: none;
 | |
|   color: #555;
 | |
| }
 | |
| 
 | |
|             body {
 | |
|             margin: 0 !important;
 | |
|             padding: 0 !important;
 | |
|             font-family: 'Segoe UI', sans-serif !important;
 | |
|             }
 | |
|             .page-wrapper {
 | |
|             width: 100%;
 | |
|             max-width: 100%;
 | |
|             overflow-x: hidden;
 | |
|             }
 | |
|             .section-content {
 | |
|             position: relative;
 | |
|             width: 100%;
 | |
|             }
 | |
|         </style>
 | |
|         </head>
 | |
|         <body>
 | |
|         <div class="page-wrapper">
 | |
|             <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EventVerse</div><ul class="nav-1-nav-links"><li><a href="home.html">Platform Home</a></li><li><a href="about.html">Our Vision</a></li><li><a href="contact.html">Get In Touch</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">Help Center</a></li><li class="nav-1-dropdown"><a href="#">Resources<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Attend Event</button><button class="nav-1-btn nav-1-solid">Host an Event</button></div></nav></div>
 | |
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>Event Search & Filter</title>
 | |
|     <style>
 | |
|         /* Basic Reset & Body Styles */
 | |
|         body {
 | |
|             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 | |
|             margin: 0;
 | |
|             padding: 20px;
 | |
|             background-color: #f4f7f6;
 | |
|             color: #333;
 | |
|         }
 | |
| 
 | |
|         /* Section Container */
 | |
|         .event-filter-section {
 | |
|             max-width: 1200px;
 | |
|             margin: 40px auto;
 | |
|             padding: 30px;
 | |
|             background-color: #ffffff;
 | |
|             border-radius: 12px;
 | |
|             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
 | |
|             border: 1px solid #e0e0e0;
 | |
|         }
 | |
| 
 | |
|         /* Section Header */
 | |
|         .event-filter-section h2 {
 | |
|             font-size: 2.2em;
 | |
|             color: #1a237e;
 | |
|             margin-bottom: 25px;
 | |
|             text-align: center;
 | |
|             font-weight: 700;
 | |
|         }
 | |
| 
 | |
|         /* Search & Filter Grid Layout */
 | |
|         .filter-controls {
 | |
|             display: grid;
 | |
|             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 | |
|             gap: 25px;
 | |
|             margin-bottom: 30px;
 | |
|             align-items: end;
 | |
|         }
 | |
| 
 | |
|         /* Form Group Styles */
 | |
|         .form-group {
 | |
|             display: flex;
 | |
|             flex-direction: column;
 | |
|         }
 | |
| 
 | |
|         .form-group label {
 | |
|             font-size: 0.95em;
 | |
|             color: #555;
 | |
|             margin-bottom: 8px;
 | |
|             font-weight: 600;
 | |
|         }
 | |
| 
 | |
|         .form-group input[type="text"],
 | |
|         .form-group input[type="date"],
 | |
|         .form-group select {
 | |
|             padding: 12px 15px;
 | |
|             border: 1px solid #ccc;
 | |
|             border-radius: 8px;
 | |
|             font-size: 1em;
 | |
|             color: #333;
 | |
|             transition: border-color 0.3s ease, box-shadow 0.3s ease;
 | |
|             width: 100%;
 | |
|             box-sizing: border-box; /* Ensures padding doesn't add to the width */
 | |
|             -webkit-appearance: none; /* Remove default browser styling for selects */
 | |
|             -moz-appearance: none;
 | |
|             appearance: none;
 | |
|             background-color: #fff;
 | |
|         }
 | |
| 
 | |
|         .form-group input[type="text"]:focus,
 | |
|         .form-group input[type="date"]:focus,
 | |
|         .form-group select:focus {
 | |
|             border-color: #4a55a2;
 | |
|             box-shadow: 0 0 0 3px rgba(74, 85, 162, 0.2);
 | |
|             outline: none;
 | |
|         }
 | |
| 
 | |
|         .form-group select {
 | |
|             background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M9.293%2012.95l.707.707L15.657%208l-1.414-1.414L10%2010.828%206.757%207.586%205.343%209z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
 | |
|             background-repeat: no-repeat;
 | |
|             background-position: right 15px center;
 | |
|             background-size: 1em;
 | |
|             padding-right: 35px; /* Make space for the arrow */
 | |
|         }
 | |
| 
 | |
| 
 | |
|         /* Search Button */
 | |
|         .filter-controls button {
 | |
|             background-color: #1a237e;
 | |
|             color: #ffffff;
 | |
|             padding: 14px 25px;
 | |
|             border: none;
 | |
|             border-radius: 8px;
 | |
|             font-size: 1.1em;
 | |
|             font-weight: 600;
 | |
|             cursor: pointer;
 | |
|             transition: background-color 0.3s ease, transform 0.2s ease;
 | |
|             width: 100%;
 | |
|         }
 | |
| 
 | |
|         .filter-controls button:hover {
 | |
|             background-color: #2c388d;
 | |
|             transform: translateY(-2px);
 | |
|         }
 | |
| 
 | |
|         .filter-controls button:active {
 | |
|             transform: translateY(0);
 | |
|         }
 | |
| 
 | |
|         /* Filter Tags/Pills (Placeholder for selected filters) */
 | |
|         .applied-filters {
 | |
|             margin-top: 25px;
 | |
|             border-top: 1px solid #eee;
 | |
|             padding-top: 20px;
 | |
|         }
 | |
| 
 | |
|         .applied-filters h3 {
 | |
|             font-size: 1.1em;
 | |
|             color: #444;
 | |
|             margin-bottom: 15px;
 | |
|             font-weight: 600;
 | |
|         }
 | |
| 
 | |
|         .filter-tags {
 | |
|             display: flex;
 | |
|             flex-wrap: wrap;
 | |
|             gap: 10px;
 | |
|         }
 | |
| 
 | |
|         .filter-tag {
 | |
|             background-color: #e0f2f7;
 | |
|             color: #0d47a1;
 | |
|             padding: 8px 15px;
 | |
|             border-radius: 20px;
 | |
|             font-size: 0.9em;
 | |
|             display: flex;
 | |
|             align-items: center;
 | |
|             gap: 8px;
 | |
|             border: 1px solid #b3e5fc;
 | |
|         }
 | |
| 
 | |
|         .filter-tag button {
 | |
|             background: none;
 | |
|             border: none;
 | |
|             color: #0d47a1;
 | |
|             font-size: 1.1em;
 | |
|             cursor: pointer;
 | |
|             padding: 0;
 | |
|             line-height: 1;
 | |
|             transition: color 0.2s ease;
 | |
|         }
 | |
| 
 | |
|         .filter-tag button:hover {
 | |
|             color: #c62828; /* Darker red for hover */
 | |
|         }
 | |
| 
 | |
|         /* Results Area (Placeholder) */
 | |
|         .event-results {
 | |
|             margin-top: 40px;
 | |
|             padding-top: 30px;
 | |
|             border-top: 1px solid #e0e0e0;
 | |
|             text-align: center;
 | |
|         }
 | |
| 
 | |
|         .event-results h3 {
 | |
|             font-size: 1.8em;
 | |
|             color: #1a237e;
 | |
|             margin-bottom: 20px;
 | |
|         }
 | |
| 
 | |
|         .results-placeholder {
 | |
|             background-color: #e8eaf6;
 | |
|             border: 1px dashed #9fa8da;
 | |
|             color: #3f51b5;
 | |
|             padding: 50px;
 | |
|             border-radius: 10px;
 | |
|             font-size: 1.2em;
 | |
|             text-align: center;
 | |
|             min-height: 200px;
 | |
|             display: flex;
 | |
|             align-items: center;
 | |
|             justify-content: center;
 | |
|             flex-direction: column;
 | |
|             gap: 15px;
 | |
|         }
 | |
| 
 | |
|         .results-placeholder p {
 | |
|             margin: 0;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         /* Responsive Adjustments */
 | |
|         @media (max-width: 768px) {
 | |
|             .event-filter-section {
 | |
|                 margin: 20px auto;
 | |
|                 padding: 20px;
 | |
|             }
 | |
| 
 | |
|             .event-filter-section h2 {
 | |
|                 font-size: 1.8em;
 | |
|                 margin-bottom: 20px;
 | |
|             }
 | |
| 
 | |
|             .filter-controls {
 | |
|                 grid-template-columns: 1fr; /* Stack columns on smaller screens */
 | |
|                 gap: 20px;
 | |
|             }
 | |
| 
 | |
|             .filter-controls button {
 | |
|                 padding: 12px 20px;
 | |
|                 font-size: 1em;
 | |
|             }
 | |
| 
 | |
|             .form-group input,
 | |
|             .form-group select {
 | |
|                 padding: 10px 12px;
 | |
|             }
 | |
| 
 | |
|             .filter-tag {
 | |
|                 padding: 6px 12px;
 | |
|                 font-size: 0.85em;
 | |
|             }
 | |
| 
 | |
|             .results-placeholder {
 | |
|                 padding: 30px;
 | |
|                 font-size: 1.1em;
 | |
|             }
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
|     <section class="event-filter-section" aria-labelledby="event-search-heading">
 | |
|         <h2 id="event-search-heading">Discover & Filter Events</h2>
 | |
| 
 | |
|         <form class="filter-controls" role="search" aria-label="Event Search Filters">
 | |
|             <div class="form-group">
 | |
|                 <label for="search-keyword">Keyword Search</label>
 | |
|                 <input type="text" id="search-keyword" name="keyword" placeholder="e.g., AI Summit, Design Expo">
 | |
|             </div>
 | |
| 
 | |
|             <div class="form-group">
 | |
|                 <label for="event-type">Event Type</label>
 | |
|                 <select id="event-type" name="type">
 | |
|                     <option value="">All Types</option>
 | |
|                     <option value="conference">Conference</option>
 | |
|                     <option value="webinar">Webinar</option>
 | |
|                     <option value="workshop">Workshop</option>
 | |
|                     <option value="networking">Networking Event</option>
 | |
|                     <option value="expo">Exposition</option>
 | |
|                     <option value="concert">Concert</option>
 | |
|                 </select>
 | |
|             </div>
 | |
| 
 | |
|             <div class="form-group">
 | |
|                 <label for="event-date">Date</label>
 | |
|                 <input type="date" id="event-date" name="date">
 | |
|             </div>
 | |
| 
 | |
|             <div class="form-group">
 | |
|                 <label for="location">Location (Virtual/Physical)</label>
 | |
|                 <input type="text" id="location" name="location" placeholder="e.g., Online, New York, Asia">
 | |
|             </div>
 | |
| 
 | |
|             <div class="form-group">
 | |
|                 <label for="industry">Industry</label>
 | |
|                 <select id="industry" name="industry">
 | |
|                     <option value="">All Industries</option>
 | |
|                     <option value="tech">Technology</option>
 | |
|                     <option value="healthcare">Healthcare</option>
 | |
|                     <option value="finance">Finance</option>
 | |
|                     <option value="education">Education</option>
 | |
|                     <option value="art">Arts & Culture</option>
 | |
|                 </select>
 | |
|             </div>
 | |
| 
 | |
|             <div class="form-group">
 | |
|                 <label for="price-range">Price Range</label>
 | |
|                 <select id="price-range" name="price">
 | |
|                     <option value="">Any Price</option>
 | |
|                     <option value="free">Free</option>
 | |
|                     <option value="paid-under-50">$1 - $50</option>
 | |
|                     <option value="paid-50-200">$51 - $200</option>
 | |
|                     <option value="paid-over-200">$200+</option>
 | |
|                 </select>
 | |
|             </div>
 | |
| 
 | |
|             <button type="submit">Search Events</button>
 | |
|         </form>
 | |
| 
 | |
|         <div class="applied-filters" aria-live="polite" aria-atomic="true">
 | |
|             <h3>Applied Filters:</h3>
 | |
|             <div class="filter-tags">
 | |
|                 <div class="filter-tag" role="status" aria-label="Filter applied: Conference">
 | |
|                     <span>Conference</span>
 | |
|                     <button aria-label="Remove Conference filter">×</button>
 | |
|                 </div>
 | |
|                 <div class="filter-tag" role="status" aria-label="Filter applied: Tech Industry">
 | |
|                     <span>Tech Industry</span>
 | |
|                     <button aria-label="Remove Tech Industry filter">×</button>
 | |
|                 </div>
 | |
|                 <!-- More filter tags would be dynamically added here -->
 | |
|             </div>
 | |
|         </div>
 | |
| 
 | |
|         <div class="event-results" role="region" aria-live="polite" aria-labelledby="event-results-heading">
 | |
|             <h3 id="event-results-heading">Search Results</h3>
 | |
|             <div class="results-placeholder">
 | |
|                 <p>No events found for your current filters.</p>
 | |
|                 <p>Adjust your search criteria or try broadening your filters to see more events.</p>
 | |
|                 <!-- This area would be dynamically populated with event cards/listings -->
 | |
|             </div>
 | |
|         </div>
 | |
|     </section>
 | |
| </body>
 | |
| </html>
 | |
| <section class="event-cards-grid-section">
 | |
|     <div class="container">
 | |
|         <h2 class="section-title">Upcoming Virtual Events</h2>
 | |
|         <p class="section-description">Discover and join our exciting array of online conferences, workshops, and networking sessions designed for remote participation.</p>
 | |
| 
 | |
|         <div class="event-cards-grid">
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image-placeholder" aria-label="Event banner image">
 | |
|                     <!-- Placeholder for event image -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <h3 class="event-card-title">Global Tech Summit 2024</h3>
 | |
|                     <p class="event-card-date-time"><time datetime="2024-10-26T09:00:00">October 26, 2024 | 9:00 AM - 5:00 PM EST</time></p>
 | |
|                     <p class="event-card-format">Virtual Conference | Main Stage, Breakout Rooms</p>
 | |
|                     <p class="event-card-description">Explore the future of technology with industry leaders, featuring tracks on AI, Web3, and sustainable tech.</p>
 | |
|                     <a href="#" class="event-card-link">View Details</a>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image-placeholder" aria-label="Event banner image">
 | |
|                     <!-- Placeholder for event image -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <h3 class="event-card-title">Innovator's Workshop Series</h3>
 | |
|                     <p class="event-card-date-time"><time datetime="2024-11-15T14:00:00">November 15, 2024 | 2:00 PM - 4:00 PM EST</time></p>
 | |
|                     <p class="event-card-format">Interactive Workshop | Hands-on Labs</p>
 | |
|                     <p class="event-card-description">A practical session on design thinking and rapid prototyping for new product development and ideation.</p>
 | |
|                     <a href="#" class="event-card-link">Register Now</a>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image-placeholder" aria-label="Event banner image">
 | |
|                     <!-- Placeholder for event image -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <h3 class="event-card-title">Future of Remote Work Panel</h3>
 | |
|                     <p class="event-card-date-time"><time datetime="2024-12-05T10:00:00">December 5, 2024 | 10:00 AM - 11:30 AM EST</time></p>
 | |
|                     <p class="event-card-format">Live Panel Discussion | Q&A Session</p>
 | |
|                     <p class="event-card-description">Experts discuss the evolving landscape of remote collaboration, essential tools, and company culture shifts.</p>
 | |
|                     <a href="#" class="event-card-link">Join Us</a>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image-placeholder" aria-label="Event banner image">
 | |
|                     <!-- Placeholder for event image -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <h3 class="event-card-title">Digital Marketing Masterclass</h3>
 | |
|                     <p class="event-card-date-time"><time datetime="2025-01-20T13:00:00">January 20, 2025 | 1:00 PM - 5:00 PM EST</time></p>
 | |
|                     <p class="event-card-format">Deep Dive Webinar | Case Studies</p>
 | |
|                     <p class="event-card-description">Learn advanced strategies in SEO, content marketing, and social media advertising from top marketers.</p>
 | |
|                     <a href="#" class="event-card-link">Explore Course</a>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image-placeholder" aria-label="Event banner image">
 | |
|                     <!-- Placeholder for event image -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <h3 class="event-card-title">AI & Ethics Forum</h3>
 | |
|                     <p class="event-card-date-time"><time datetime="2025-02-10T09:30:00">February 10, 2025 | 9:30 AM - 12:00 PM EST</time></p>
 | |
|                     <p class="event-card-format">Discussion Forum | Expert Breakouts</p>
 | |
|                     <p class="event-card-description">Engage in critical conversations about the ethical implications and societal impact of artificial intelligence.</p>
 | |
|                     <a href="#" class="event-card-link">Learn More</a>
 | |
|                 </div>
 | |
|             </article>
 | |
|         </div>
 | |
|     </div>
 | |
| </section>
 | |
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>Upcoming Events - Modern Platform</title>
 | |
|     <link rel="preconnect" href="https://fonts.googleapis.com">
 | |
|     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 | |
|     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 | |
|     <style>
 | |
|         :root {
 | |
|             --primary-color: #6B4EE4; /* A vibrant purple often used in modern tech */
 | |
|             --text-color: #1A202C; /* Dark charcoal for body text */
 | |
|             --heading-color: #000; /* Black for headings */
 | |
|             --background-light: #F9FAFB; /* Light grey background */
 | |
|             --card-background: #FFFFFF;
 | |
|             --border-color: #E2E8F0;
 | |
|             --secondary-text: #6B7280;
 | |
|             --accent-green: #22C55E; /* For live indicators or positive actions */
 | |
|             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 | |
|             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 | |
|         }
 | |
| 
 | |
|         body {
 | |
|             font-family: 'Inter', sans-serif;
 | |
|             margin: 0;
 | |
|             padding: 0;
 | |
|             background-color: var(--background-light);
 | |
|             color: var(--text-color);
 | |
|             line-height: 1.6;
 | |
|         }
 | |
| 
 | |
|         .container {
 | |
|             max-width: 1200px;
 | |
|             margin: 0 auto;
 | |
|             padding: 4rem 1.5rem;
 | |
|         }
 | |
| 
 | |
|         .section-header {
 | |
|             text-align: center;
 | |
|             margin-bottom: 3rem;
 | |
|         }
 | |
| 
 | |
|         .section-header h2 {
 | |
|             font-size: 2.5rem;
 | |
|             color: var(--heading-color);
 | |
|             margin-bottom: 1rem;
 | |
|             font-weight: 700;
 | |
|         }
 | |
| 
 | |
|         .section-header p {
 | |
|             font-size: 1.125rem;
 | |
|             color: var(--secondary-text);
 | |
|             max-width: 600px;
 | |
|             margin: 0 auto;
 | |
|         }
 | |
| 
 | |
|         .events-grid {
 | |
|             display: grid;
 | |
|             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 | |
|             gap: 2rem;
 | |
|         }
 | |
| 
 | |
|         .event-card {
 | |
|             background-color: var(--card-background);
 | |
|             border-radius: 0.75rem;
 | |
|             box-shadow: var(--shadow-md);
 | |
|             overflow: hidden;
 | |
|             display: flex;
 | |
|             flex-direction: column;
 | |
|             transition: transform 0.3s ease, box-shadow 0.3s ease;
 | |
|             border: 1px solid var(--border-color);
 | |
|         }
 | |
| 
 | |
|         .event-card:hover {
 | |
|             transform: translateY(-5px);
 | |
|             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 | |
|         }
 | |
| 
 | |
|         .event-card-image {
 | |
|             width: 100%;
 | |
|             height: 200px;
 | |
|             background-color: var(--border-color); /* Placeholder color */
 | |
|             background-size: cover;
 | |
|             background-position: center;
 | |
|             border-top-left-radius: 0.75rem;
 | |
|             border-top-right-radius: 0.75rem;
 | |
|             display: flex;
 | |
|             align-items: center;
 | |
|             justify-content: center;
 | |
|             color: var(--secondary-text);
 | |
|             font-size: 1.25rem;
 | |
|             font-weight: 500;
 | |
|         }
 | |
| 
 | |
|         .event-card-content {
 | |
|             padding: 1.5rem;
 | |
|             display: flex;
 | |
|             flex-direction: column;
 | |
|             flex-grow: 1;
 | |
|         }
 | |
| 
 | |
|         .event-card-date {
 | |
|             font-size: 0.875rem;
 | |
|             color: var(--primary-color);
 | |
|             font-weight: 600;
 | |
|             margin-bottom: 0.5rem;
 | |
|             text-transform: uppercase;
 | |
|         }
 | |
| 
 | |
|         .event-card h3 {
 | |
|             font-size: 1.5rem;
 | |
|             color: var(--heading-color);
 | |
|             margin-top: 0;
 | |
|             margin-bottom: 0.75rem;
 | |
|             font-weight: 600;
 | |
|             line-height: 1.3;
 | |
|         }
 | |
| 
 | |
|         .event-card p {
 | |
|             font-size: 1rem;
 | |
|             color: var(--secondary-text);
 | |
|             margin-bottom: 1.25rem;
 | |
|             flex-grow: 1;
 | |
|         }
 | |
| 
 | |
|         .event-card-meta {
 | |
|             display: flex;
 | |
|             justify-content: space-between;
 | |
|             align-items: center;
 | |
|             font-size: 0.875rem;
 | |
|             color: var(--secondary-text);
 | |
|             margin-top: auto; /* Pushes meta to the bottom */
 | |
|             padding-top: 1rem;
 | |
|             border-top: 1px solid var(--border-color);
 | |
|         }
 | |
| 
 | |
|         .event-card-meta .location,
 | |
|         .event-card-meta .attendees {
 | |
|             display: flex;
 | |
|             align-items: center;
 | |
|             gap: 0.4rem;
 | |
|         }
 | |
| 
 | |
|         .event-card-meta .location::before {
 | |
|             content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
 | |
|             display: inline-block;
 | |
|             vertical-align: middle;
 | |
|             width: 16px;
 | |
|             height: 16px;
 | |
|         }
 | |
| 
 | |
|         .event-card-meta .attendees::before {
 | |
|             content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>');
 | |
|             display: inline-block;
 | |
|             vertical-align: middle;
 | |
|             width: 16px;
 | |
|             height: 16px;
 | |
|         }
 | |
| 
 | |
| 
 | |
|         .button {
 | |
|             display: inline-flex;
 | |
|             align-items: center;
 | |
|             justify-content: center;
 | |
|             padding: 0.75rem 1.5rem;
 | |
|             font-size: 1rem;
 | |
|             font-weight: 600;
 | |
|             color: var(--card-background);
 | |
|             background-color: var(--primary-color);
 | |
|             border: none;
 | |
|             border-radius: 0.5rem;
 | |
|             cursor: pointer;
 | |
|             text-decoration: none;
 | |
|             transition: background-color 0.3s ease, transform 0.2s ease;
 | |
|         }
 | |
| 
 | |
|         .button:hover {
 | |
|             background-color: #5A3EC0; /* Slightly darker primary */
 | |
|             transform: translateY(-2px);
 | |
|         }
 | |
| 
 | |
|         .view-all-events {
 | |
|             text-align: center;
 | |
|             margin-top: 3rem;
 | |
|         }
 | |
| 
 | |
|         /* Responsive Adjustments */
 | |
|         @media (max-width: 768px) {
 | |
|             .container {
 | |
|                 padding: 3rem 1rem;
 | |
|             }
 | |
| 
 | |
|             .section-header h2 {
 | |
|                 font-size: 2rem;
 | |
|             }
 | |
| 
 | |
|             .section-header p {
 | |
|                 font-size: 1rem;
 | |
|             }
 | |
| 
 | |
|             .events-grid {
 | |
|                 grid-template-columns: 1fr; /* Stack cards on small screens */
 | |
|             }
 | |
| 
 | |
|             .event-card-image {
 | |
|                 height: 180px;
 | |
|             }
 | |
| 
 | |
|             .event-card h3 {
 | |
|                 font-size: 1.375rem;
 | |
|             }
 | |
| 
 | |
|             .event-card-content {
 | |
|                 padding: 1.25rem;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         @media (max-width: 480px) {
 | |
|             .container {
 | |
|                 padding: 2rem 0.75rem;
 | |
|             }
 | |
| 
 | |
|             .section-header h2 {
 | |
|                 font-size: 1.75rem;
 | |
|             }
 | |
| 
 | |
|             .event-card-image {
 | |
|                 height: 150px;
 | |
|             }
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
|     <section id="upcoming-events" class="container">
 | |
|         <header class="section-header">
 | |
|             <h2>Upcoming Events</h2>
 | |
|             <p>Don't miss out on the next big thing! Explore our curated list of virtual conferences, workshops, and networking sessions.</p>
 | |
|         </header>
 | |
| 
 | |
|         <div class="events-grid">
 | |
|             <!-- Event Card 1 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Tech+Summit+2024');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Oct 26, 2024 - Oct 28, 2024</p>
 | |
|                     <h3>Global Tech Innovation Summit 2024</h3>
 | |
|                     <p>Join industry leaders and innovators to explore the future of AI, blockchain, and sustainable technology.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Virtual</span>
 | |
|                         <span class="attendees">1,250+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <!-- Event Card 2 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Digital+Marketing');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Nov 15, 2024</p>
 | |
|                     <h3>Digital Marketing Trends & Strategy Workshop</h3>
 | |
|                     <p>Learn the latest SEO, social media, and content marketing strategies from top experts in the field.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Online</span>
 | |
|                         <span class="attendees">480+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <!-- Event Card 3 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Healthcare+Innovation');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Dec 01, 2024 - Dec 03, 2024</p>
 | |
|                     <h3>Future of Healthcare: AI & Biotech Conference</h3>
 | |
|                     <p>Discover groundbreaking advancements in medical technology, AI diagnostics, and personalized medicine.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Virtual Venue</span>
 | |
|                         <span class="attendees">900+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <!-- Event Card 4 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Startup+Pitch');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Jan 10, 2025</p>
 | |
|                     <h3>Startup Pitch Competition & Investor Forum</h3>
 | |
|                     <p>Witness innovative startups present their ideas to a panel of venture capitalists and angel investors.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Online Auditorium</span>
 | |
|                         <span class="attendees">750+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <!-- Event Card 5 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Creative+Arts');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Feb 20, 2025 - Feb 22, 2025</p>
 | |
|                     <h3>Creative Arts & Design Festival</h3>
 | |
|                     <p>A celebration of digital art, animation, graphic design, and interactive media. Featuring live demos.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Virtual Exhibition</span>
 | |
|                         <span class="attendees">600+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
| 
 | |
|             <!-- Event Card 6 -->
 | |
|             <article class="event-card">
 | |
|                 <div class="event-card-image" style="background-image: url('https://via.placeholder.com/600x400/ECEFF1/90A4AE?text=Future+of+Work');">
 | |
|                     <!-- Wireframe-friendly placeholder -->
 | |
|                 </div>
 | |
|                 <div class="event-card-content">
 | |
|                     <p class="event-card-date">Mar 05, 2025</p>
 | |
|                     <h3>The Future of Work: Remote & Hybrid Models</h3>
 | |
|                     <p>Explore strategies for building effective remote teams, fostering culture, and leveraging collaboration tools.</p>
 | |
|                     <div class="event-card-meta">
 | |
|                         <span class="location">Virtual Conference Room</span>
 | |
|                         <span class="attendees">550+ attendees</span>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </article>
 | |
|         </div>
 | |
| 
 | |
|         <div class="view-all-events">
 | |
|             <a href="#events-page" class="button">View All Events</a>
 | |
|         </div>
 | |
|     </section>
 | |
| </body>
 | |
| </html>
 | |
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>Featured Organizers</title>
 | |
|     <style>
 | |
|         /* Basic Reset & Body Styling */
 | |
|         body {
 | |
|             margin: 0;
 | |
|             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 | |
|             background-color: #f8f9fa;
 | |
|             color: #343a40;
 | |
|             line-height: 1.6;
 | |
|         }
 | |
| 
 | |
|         /* Section Styling */
 | |
|         .featured-organizers-section {
 | |
|             padding: 60px 20px;
 | |
|             text-align: center;
 | |
|             background-color: #ffffff;
 | |
|             border-bottom: 1px solid #e9ecef;
 | |
|         }
 | |
| 
 | |
|         /* Container for responsiveness */
 | |
|         .container {
 | |
|             max-width: 1200px;
 | |
|             margin: 0 auto;
 | |
|             padding: 0 15px;
 | |
|         }
 | |
| 
 | |
|         /* Heading Styles */
 | |
|         .featured-organizers-section h2 {
 | |
|             font-size: 2.5rem;
 | |
|             color: #212529;
 | |
|             margin-bottom: 20px;
 | |
|             font-weight: 700;
 | |
|         }
 | |
| 
 | |
|         .featured-organizers-section p.lead {
 | |
|             font-size: 1.15rem;
 | |
|             color: #6c757d;
 | |
|             margin-bottom: 40px;
 | |
|             max-width: 800px;
 | |
|             margin-left: auto;
 | |
|             margin-right: auto;
 | |
|         }
 | |
| 
 | |
|         /* Grid for Organizers */
 | |
|         .organizers-grid {
 | |
|             display: grid;
 | |
|             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 | |
|             gap: 30px;
 | |
|             margin-top: 40px;
 | |
|         }
 | |
| 
 | |
|         /* Individual Organizer Card */
 | |
|         .organizer-card {
 | |
|             background-color: #fff;
 | |
|             border-radius: 12px;
 | |
|             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 | |
|             padding: 30px;
 | |
|             display: flex;
 | |
|             flex-direction: column;
 | |
|             align-items: center;
 | |
|             text-align: center;
 | |
|             transition: transform 0.3s ease, box-shadow 0.3s ease;
 | |
|             overflow: hidden; /* Ensures content within rounds nicely */
 | |
|         }
 | |
| 
 | |
|         .organizer-card:hover {
 | |
|             transform: translateY(-8px);
 | |
|             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
 | |
|         }
 | |
| 
 | |
|         .organizer-card .logo-placeholder {
 | |
|             width: 120px;
 | |
|             height: 120px;
 | |
|             background-color: #e0e0e0;
 | |
|             border-radius: 50%;
 | |
|             display: flex;
 | |
|             justify-content: center;
 | |
|             align-items: center;
 | |
|             margin-bottom: 25px;
 | |
|             overflow: hidden; /* For actual images */
 | |
|         }
 | |
| 
 | |
|         .organizer-card .logo-placeholder img {
 | |
|             max-width: 100%;
 | |
|             max-height: 100%;
 | |
|             object-fit: contain;
 | |
|             border-radius: 50%; /* If logo should be circular */
 | |
|         }
 | |
| 
 | |
|         .organizer-card .logo-placeholder span {
 | |
|             font-size: 3rem;
 | |
|             color: #a0a0a0;
 | |
|             font-weight: bold;
 | |
|         }
 | |
| 
 | |
|         .organizer-card h3 {
 | |
|             font-size: 1.6rem;
 | |
|             color: #212529;
 | |
|             margin-bottom: 10px;
 | |
|             font-weight: 600;
 | |
|         }
 | |
| 
 | |
|         .organizer-card p {
 | |
|             font-size: 1rem;
 | |
|             color: #495057;
 | |
|             margin-bottom: 20px;
 | |
|             flex-grow: 1; /* Allows description to take available space */
 | |
|         }
 | |
| 
 | |
|         .organizer-card .btn-learn-more {
 | |
|             display: inline-block;
 | |
|             background-color: #007bff;
 | |
|             color: #fff;
 | |
|             padding: 10px 20px;
 | |
|             border-radius: 50px;
 | |
|             text-decoration: none;
 | |
|             font-weight: 500;
 | |
|             transition: background-color 0.3s ease, transform 0.2s ease;
 | |
|             font-size: 0.95rem;
 | |
|             margin-top: auto; /* Pushes button to the bottom */
 | |
|         }
 | |
| 
 | |
|         .organizer-card .btn-learn-more:hover {
 | |
|             background-color: #0056b3;
 | |
|             transform: translateY(-2px);
 | |
|         }
 | |
| 
 | |
|         /* Call to Action at the bottom */
 | |
|         .call-to-action {
 | |
|             margin-top: 60px;
 | |
|             padding: 40px;
 | |
|             background-color: #eaf6ff;
 | |
|             border-radius: 12px;
 | |
|             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 | |
|         }
 | |
| 
 | |
|         .call-to-action h3 {
 | |
|             font-size: 2rem;
 | |
|             color: #212529;
 | |
|             margin-bottom: 15px;
 | |
|             font-weight: 600;
 | |
|         }
 | |
| 
 | |
|         .call-to-action p {
 | |
|             font-size: 1.1rem;
 | |
|             color: #495057;
 | |
|             margin-bottom: 30px;
 | |
|             max-width: 700px;
 | |
|             margin-left: auto;
 | |
|             margin-right: auto;
 | |
|         }
 | |
| 
 | |
|         .call-to-action .btn-primary {
 | |
|             display: inline-block;
 | |
|             background-color: #28a745;
 | |
|             color: #fff;
 | |
|             padding: 14px 30px;
 | |
|             border-radius: 50px;
 | |
|             text-decoration: none;
 | |
|             font-weight: 600;
 | |
|             font-size: 1.1rem;
 | |
|             transition: background-color 0.3s ease, transform 0.2s ease;
 | |
|         }
 | |
| 
 | |
|         .call-to-action .btn-primary:hover {
 | |
|             background-color: #218838;
 | |
|             transform: translateY(-2px);
 | |
|         }
 | |
| 
 | |
|         /* Responsive adjustments */
 | |
|         @media (max-width: 992px) {
 | |
|             .featured-organizers-section h2 {
 | |
|                 font-size: 2.2rem;
 | |
|             }
 | |
|             .featured-organizers-section p.lead {
 | |
|                 font-size: 1.05rem;
 | |
|             }
 | |
|             .organizers-grid {
 | |
|                 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 | |
|             }
 | |
|             .organizer-card {
 | |
|                 padding: 25px;
 | |
|             }
 | |
|             .organizer-card h3 {
 | |
|                 font-size: 1.4rem;
 | |
|             }
 | |
|             .organizer-card p {
 | |
|                 font-size: 0.95rem;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         @media (max-width: 768px) {
 | |
|             .featured-organizers-section {
 | |
|                 padding: 40px 15px;
 | |
|             }
 | |
|             .featured-organizers-section h2 {
 | |
|                 font-size: 2rem;
 | |
|             }
 | |
|             .featured-organizers-section p.lead {
 | |
|                 font-size: 1rem;
 | |
|                 margin-bottom: 30px;
 | |
|             }
 | |
|             .organizers-grid {
 | |
|                 grid-template-columns: 1fr; /* Stack on small screens */
 | |
|                 gap: 25px;
 | |
|             }
 | |
|             .organizer-card .logo-placeholder {
 | |
|                 width: 100px;
 | |
|                 height: 100px;
 | |
|                 margin-bottom: 20px;
 | |
|             }
 | |
|             .organizer-card .logo-placeholder span {
 | |
|                 font-size: 2.5rem;
 | |
|             }
 | |
|             .call-to-action {
 | |
|                 padding: 30px 20px;
 | |
|             }
 | |
|             .call-to-action h3 {
 | |
|                 font-size: 1.7rem;
 | |
|             }
 | |
|             .call-to-action p {
 | |
|                 font-size: 1rem;
 | |
|             }
 | |
|             .call-to-action .btn-primary {
 | |
|                 padding: 12px 25px;
 | |
|                 font-size: 1rem;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         @media (max-width: 480px) {
 | |
|             .featured-organizers-section h2 {
 | |
|                 font-size: 1.8rem;
 | |
|             }
 | |
|             .featured-organizers-section p.lead {
 | |
|                 font-size: 0.9rem;
 | |
|             }
 | |
|             .organizer-card h3 {
 | |
|                 font-size: 1.3rem;
 | |
|             }
 | |
|             .organizer-card p {
 | |
|                 font-size: 0.9rem;
 | |
|             }
 | |
|             .organizer-card .btn-learn-more {
 | |
|                 padding: 8px 15px;
 | |
|                 font-size: 0.85rem;
 | |
|             }
 | |
|             .call-to-action h3 {
 | |
|                 font-size: 1.5rem;
 | |
|             }
 | |
|             .call-to-action p {
 | |
|                 font-size: 0.95rem;
 | |
|             }
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
| 
 | |
|     <section class="featured-organizers-section" aria-labelledby="featuredOrganizersHeading">
 | |
|         <div class="container">
 | |
|             <h2 id="featuredOrganizersHeading">Our Featured Event Organizers</h2>
 | |
|             <p class="lead">Discover the innovative organizations and communities bringing exceptional virtual conferences and networking experiences to our platform.</p>
 | |
| 
 | |
|             <div class="organizers-grid">
 | |
|                 <article class="organizer-card">
 | |
|                     <div class="logo-placeholder" aria-label="Logo for Tech Innovators Inc.">
 | |
|                         <!-- Replace with <img src="path/to/tech-innovators-logo.png" alt="Tech Innovators Inc. Logo"> -->
 | |
|                         <span>TI</span>
 | |
|                     </div>
 | |
|                     <h3>Tech Innovators Inc.</h3>
 | |
|                     <p>Pioneering virtual summits for cutting-edge technology and software development. Known for interactive workshops and expert-led discussions.</p>
 | |
|                     <a href="#" class="btn-learn-more" aria-label="Learn more about Tech Innovators Inc.">Learn More</a>
 | |
|                 </article>
 | |
| 
 | |
|                 <article class="organizer-card">
 | |
|                     <div class="logo-placeholder" aria-label="Logo for Global Marketing Alliance">
 | |
|                         <!-- Replace with <img src="path/to/global-marketing-logo.png" alt="Global Marketing Alliance Logo"> -->
 | |
|                         <span>GMA</span>
 | |
|                     </div>
 | |
|                     <h3>Global Marketing Alliance</h3>
 | |
|                     <p>Connecting marketers worldwide through virtual conferences on digital trends, branding, and consumer insights. Excellent networking opportunities.</p>
 | |
|                     <a href="#" class="btn-learn-more" aria-label="Learn more about Global Marketing Alliance">Learn More</a>
 | |
|                 </article>
 | |
| 
 | |
|                 <article class="organizer-card">
 | |
|                     <div class="logo-placeholder" aria-label="Logo for Health & Wellness Summit">
 | |
|                         <!-- Replace with <img src="path/to/health-wellness-logo.png" alt="Health & Wellness Summit Logo"> -->
 | |
|                         <span>HWS</span>
 | |
|                     </div>
 | |
|                     <h3>Health & Wellness Summit</h3>
 | |
|                     <p>Dedicated to promoting holistic well-being with virtual sessions on fitness, nutrition, and mental health. Features renowned speakers.</p>
 | |
|                     <a href="#" class="btn-learn-more" aria-label="Learn more about Health & Wellness Summit">Learn More</a>
 | |
|                 </article>
 | |
| 
 | |
|                 <article class="organizer-card">
 | |
|                     <div class="logo-placeholder" aria-label="Logo for Creative Arts Collective">
 | |
|                         <!-- Replace with <img src="path/to/creative-arts-logo.png" alt="Creative Arts Collective Logo"> -->
 | |
|                         <span>CAC</span>
 | |
|                     </div>
 | |
|                     <h3>Creative Arts Collective</h3>
 | |
|                     <p>Showcasing the latest in art, design, and performance through immersive virtual galleries and live demonstrations. A hub for artists.</p>
 | |
|                     <a href="#" class="btn-learn-more" aria-label="Learn more about Creative Arts Collective">Learn More</a>
 | |
|                 </article>
 | |
|             </div>
 | |
| 
 | |
|             <div class="call-to-action">
 | |
|                 <h3>Want to Host Your Next Virtual Event?</h3>
 | |
|                 <p>Join our growing community of successful event organizers and leverage our cutting-edge platform for seamless virtual experiences.</p>
 | |
|                 <a href="#" class="btn-primary" aria-label="Start organizing your event today">Become an Organizer</a>
 | |
|             </div>
 | |
|         </div>
 | |
|     </section>
 | |
| 
 | |
| </body>
 | |
| </html>
 | |
| <section class="pagination-load-more-section">
 | |
|     <h2 class="section-title">Discover Virtual Conference Sessions</h2>
 | |
| 
 | |
|     <div class="items-grid">
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Keynote: The Future of Remote Collaboration</h3>
 | |
|             <p class="session-meta">Live Stream | Oct 26, 2023 | 10:00 AM EDT</p>
 | |
|             <p class="session-description">Dive into insights on emerging tools and strategies for effective global teamwork.</p>
 | |
|         </div>
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Breakout: Mastering Spatial Audio Networking</h3>
 | |
|             <p class="session-meta">Breakout Room 1 | Oct 26, 2023 | 11:30 AM EDT</p>
 | |
|             <p class="session-description">Practical workshop on leveraging spatial audio for immersive attendee interactions.</p>
 | |
|         </div>
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Panel: Avatar-Based Experiences & Engagement</h3>
 | |
|             <p class="session-meta">Main Stage | Oct 26, 2023 | 01:00 PM EDT</p>
 | |
|             <p class="session-description">Industry leaders discuss the impact of avatar technology on virtual events.</p>
 | |
|         </div>
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Workshop: Building Your Virtual Event Strategy</h3>
 | |
|             <p class="session-meta">Workshop Room | Oct 26, 2023 | 02:30 PM EDT</p>
 | |
|             <p class="session-description">Interactive session on planning and executing successful virtual conferences.</p>
 | |
|         </div>
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Fireside Chat: Monetization in Virtual Events</h3>
 | |
|             <p class="session-meta">Live Stream | Oct 26, 2023 | 04:00 PM EDT</p>
 | |
|             <p class="session-description">Explore various revenue models for virtual and hybrid event platforms.</p>
 | |
|         </div>
 | |
|         <div class="session-card">
 | |
|             <div class="session-image-placeholder"></div>
 | |
|             <h3 class="session-title">Networking Mixer: AI-Powered Connections</h3>
 | |
|             <p class="session-meta">Networking Zone | Oct 26, 2023 | 05:30 PM EDT</p>
 | |
|             <p class="session-description">Connect with peers using intelligent matching algorithms in an avatar environment.</p>
 | |
|         </div>
 | |
|     </div>
 | |
| 
 | |
|     <div class="pagination-load-more-controls">
 | |
|         <nav class="pagination-nav" aria-label="Pagination for conference sessions">
 | |
|             <ul class="pagination-list">
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link pagination-prev" aria-label="Previous Page">Prev</a>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link" aria-label="Page 1">1</a>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link pagination-active" aria-label="Page 2, Current Page">2</a>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link" aria-label="Page 3">3</a>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <span class="pagination-ellipsis">...</span>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link" aria-label="Page 10">10</a>
 | |
|                 </li>
 | |
|                 <li class="pagination-item">
 | |
|                     <a href="#" class="pagination-link pagination-next" aria-label="Next Page">Next</a>
 | |
|                 </li>
 | |
|             </ul>
 | |
|         </nav>
 | |
| 
 | |
|         <button type="button" class="load-more-button">Load More Sessions</button>
 | |
|     </div>
 | |
| </section>
 | |
| <div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">VirtuCon</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Virtual Plaza, Innovation City, CA 90210</span></p><p><strong>Contact:</strong><br></br><span>1-800-CONNECT</span><br></br><a href="mailto:info@relume.io">info@virtucon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Platform Features</a></li><li><a href="#">Pricing Plans</a></li><li><a href="#">Success Stories</a></li><li><a href="#">Event Solutions</a></li><li><a href="#">Resource Hub</a></li></ul><ul><li><a href="#">About VirtuCon</a></li><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Join Our Team</a></li><li><a href="#">Get In Touch</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2024 VirtuCon. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
 | |
|         </div>
 | |
|         <script>
 | |
|             document.addEventListener('DOMContentLoaded', function() {
 | |
|             document.body.style.display = 'none';
 | |
|             setTimeout(function() { document.body.style.display = ''; }, 10);
 | |
|             });
 | |
|         </script>
 | |
|         </body>
 | |
|         </html> (see https://g.co/ng/security#xss) |