1432 lines
52 KiB
HTML
1432 lines
52 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>Event Detail Page</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;
|
|
}
|
|
|
|
.text-2-wrapper {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
background: #fff;
|
|
}
|
|
|
|
.text-2-section {
|
|
padding: 60px 30px;
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: auto;
|
|
}
|
|
|
|
.text-2-tagline {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.text-2-heading {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.text-2-description {
|
|
font-size: 14px;
|
|
color: #555;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.text-2-button-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text-2-btn {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text-2-solid {
|
|
background: #000;
|
|
color: #fff;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.text-2-outline {
|
|
background: transparent;
|
|
border: 1px solid #000;
|
|
color: #000;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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>
|
|
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Connect. Engage. Innovate.</p><h2 class="text-2-heading">Revolutionize Your Virtual Conferences</h2><p class="text-2-description">Go beyond traditional online events. Our platform redefines virtual engagement with immersive video streaming, interactive breakout rooms, live chat, and cutting-edge spatial audio or avatar-based networking for unparalleled attendee connections.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Request a Demo</button><button class="text-2-btn text-2-outline">Explore Features</button></div></section></div>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Event Description Section</title>
|
|
<style>
|
|
/* Basic Reset & Box-sizing */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Body & Typography Defaults */
|
|
body {
|
|
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Example modern font stack */
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* Section Styling */
|
|
.event-description-section {
|
|
padding: 60px 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
|
|
border-radius: 8px;
|
|
display: grid;
|
|
gap: 40px;
|
|
grid-template-columns: 1fr; /* Default for mobile */
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.event-description-section {
|
|
grid-template-columns: 2fr 1fr; /* Two columns for larger screens */
|
|
gap: 60px;
|
|
}
|
|
}
|
|
|
|
/* Left Column - Main Content */
|
|
.event-description-main {
|
|
padding-right: 20px; /* Space between columns on larger screens */
|
|
border-right: 1px solid #eee; /* Visual separator */
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.event-description-main {
|
|
border-right: none;
|
|
padding-right: 0;
|
|
padding-bottom: 30px; /* Space before right column content on mobile */
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
.event-description-main h2 {
|
|
font-size: 2.5em;
|
|
color: #1a1a1a;
|
|
margin-bottom: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.event-description-main p {
|
|
margin-bottom: 15px;
|
|
font-size: 1.1em;
|
|
color: #555;
|
|
}
|
|
|
|
.event-description-main ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.event-description-main ul li {
|
|
position: relative;
|
|
padding-left: 25px;
|
|
margin-bottom: 10px;
|
|
color: #555;
|
|
}
|
|
|
|
.event-description-main ul li::before {
|
|
content: '✓'; /* Checkmark icon */
|
|
position: absolute;
|
|
left: 0;
|
|
color: #007bff; /* Primary color for icons */
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Right Column - Details/Highlights */
|
|
.event-description-sidebar h3 {
|
|
font-size: 1.8em;
|
|
color: #1a1a1a;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.event-details-card {
|
|
background-color: #f0f8ff; /* Light blue background */
|
|
border-left: 5px solid #007bff; /* Primary color border */
|
|
padding: 25px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.event-details-card h4 {
|
|
font-size: 1.3em;
|
|
color: #007bff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.event-details-card p {
|
|
font-size: 1em;
|
|
color: #444;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.event-details-card strong {
|
|
color: #0056b3;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 12px 25px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="event-description-section" aria-labelledby="event-title">
|
|
<div class="event-description-main">
|
|
<h2 id="event-title">Unleash the Future of Connectivity: Global Tech Summit 2024</h2>
|
|
<p>Join us for the premier virtual gathering of innovators, leaders, and enthusiasts in the tech industry. The Global Tech Summit 2024 is an immersive online experience designed to push the boundaries of what's possible, connecting you with groundbreaking ideas and invaluable networking opportunities.</p>
|
|
<p>Our platform redefines virtual engagement, offering a seamless and interactive environment that mimics the energy of in-person events. From cutting-edge presentations to intimate discussions, every moment is crafted for maximum impact.</p>
|
|
<h3>What to Expect:</h3>
|
|
<ul>
|
|
<li><strong>Dynamic Virtual Conference Stages:</strong> High-definition streaming of keynotes and panel discussions.</li>
|
|
<li><strong>Interactive Breakout Rooms:</strong> Facilitate smaller, focused group discussions and workshops.</li>
|
|
<li><strong>Live Chat & Q&A:</strong> Engage directly with speakers and attendees in real-time.</li>
|
|
<li><strong>Real-time Attendee Networking:</strong> Utilize spatial audio for organic conversations or explore avatar-based social spaces.</li>
|
|
<li><strong>Resource Hub:</strong> Access speaker slides, whitepapers, and exclusive content post-event.</li>
|
|
<li><strong>Exhibitor Booths:</strong> Explore virtual booths from leading tech companies and startups.</li>
|
|
</ul>
|
|
<p>Whether you're a startup founder, an industry veteran, or a curious learner, this summit offers unparalleled insights into the trends shaping tomorrow's world. Discover new technologies, forge meaningful connections, and be part of a community driving innovation forward.</p>
|
|
</div>
|
|
<aside class="event-description-sidebar">
|
|
<h3>Key Highlights & Details</h3>
|
|
<div class="event-details-card">
|
|
<h4>Event Dates</h4>
|
|
<p><strong>Starts:</strong> October 26, 2024, 09:00 AM PST</p>
|
|
<p><strong>Ends:</strong> October 28, 2024, 05:00 PM PST</p>
|
|
</div>
|
|
<div class="event-details-card">
|
|
<h4>Virtual Venue Access</h4>
|
|
<p>Access details will be sent to registered attendees 48 hours prior to the event start.</p>
|
|
<p>Platform: <strong>Our Custom Interactive Platform</strong> (Similar to Hopin/Airmeet)</p>
|
|
</div>
|
|
<div class="event-details-card">
|
|
<h4>Who Should Attend?</h4>
|
|
<p>Innovators, Developers, Entrepreneurs, Investors, Researchers, Students, and anyone passionate about technology and its future applications.</p>
|
|
</div>
|
|
<a href="#" class="cta-button" aria-label="Register for the Global Tech Summit 2024">Register Now to Secure Your Spot</a>
|
|
</aside>
|
|
</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>Speakers & Presenters</title>
|
|
<style>
|
|
/* Basic Reset & Box Sizing */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f4f7f6;
|
|
}
|
|
|
|
/* Section Styling */
|
|
.speaker-section {
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.speaker-section-header h2 {
|
|
font-size: 2.8em;
|
|
color: #1a202c;
|
|
margin-bottom: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.speaker-section-header p {
|
|
font-size: 1.2em;
|
|
color: #4a5568;
|
|
max-width: 800px;
|
|
margin: 0 auto 50px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Speaker Grid */
|
|
.speaker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 30px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Speaker Card */
|
|
.speaker-card {
|
|
background-color: #f7fafc;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.speaker-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.speaker-card-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background-color: #cbd5e0; /* Placeholder color */
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
border: 4px solid #4299e1; /* Accent border */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 3em;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.speaker-card-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.speaker-card h3 {
|
|
font-size: 1.6em;
|
|
color: #2d3748;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.speaker-card p.speaker-title {
|
|
font-size: 1.05em;
|
|
color: #6b7280;
|
|
margin-bottom: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.speaker-card p.speaker-description {
|
|
font-size: 0.95em;
|
|
color: #4a5568;
|
|
text-align: center;
|
|
flex-grow: 1; /* Allows description to take up available space */
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.speaker-card .speaker-social-links {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.speaker-card .speaker-social-links a {
|
|
color: #4299e1;
|
|
font-size: 1.4em;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.speaker-card .speaker-social-links a:hover {
|
|
color: #2b6cb0;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.speaker-section {
|
|
padding: 40px 15px;
|
|
}
|
|
|
|
.speaker-section-header h2 {
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
.speaker-section-header p {
|
|
font-size: 1em;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.speaker-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 25px;
|
|
}
|
|
|
|
.speaker-card-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.speaker-card h3 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.speaker-card p.speaker-title {
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.speaker-card p.speaker-description {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.speaker-section-header h2 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.speaker-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.speaker-card {
|
|
padding: 25px;
|
|
}
|
|
|
|
.speaker-card-avatar {
|
|
width: 90px;
|
|
height: 90px;
|
|
font-size: 2.5em;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="speaker-section" id="speakers">
|
|
<header class="speaker-section-header">
|
|
<h2>Meet Our Esteemed Speakers & Presenters</h2>
|
|
<p>Engage with industry leaders, innovators, and experts who will share invaluable insights, cutting-edge research, and practical strategies across various tracks. Get ready to be inspired!</p>
|
|
</header>
|
|
|
|
<div class="speaker-grid">
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">AB</div>
|
|
<h3>Alice Black</h3>
|
|
<p class="speaker-title">CEO, Tech Innovators Inc.</p>
|
|
<p class="speaker-description">A visionary leader in AI and machine learning, driving transformative change in the tech landscape. Specializes in scalable solutions.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">CB</div>
|
|
<h3>Charles Brown</h3>
|
|
<p class="speaker-title">Lead VR Architect, FutureScape Studios</p>
|
|
<p class="speaker-description">Pioneering immersive virtual realities and spatial audio experiences for next-gen platforms. Passionate about interactive design.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">DL</div>
|
|
<h3>Diana Lee</h3>
|
|
<p class="speaker-title">Chief Product Officer, Global Connect</p>
|
|
<p class="speaker-description">Expert in developing intuitive networking solutions for large-scale virtual events. Focuses on user experience and scalability.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">EJ</div>
|
|
<h3>Ethan Jones</h3>
|
|
<p class="speaker-title">Founder, Immersive Audio Solutions</p>
|
|
<p class="speaker-description">A pioneer in spatial audio technologies, enabling realistic and engaging soundscapes for virtual environments and conferences.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">FG</div>
|
|
<h3>Fiona Green</h3>
|
|
<p class="speaker-title">Head of UX/UI, Virtual Spaces Co.</p>
|
|
<p class="speaker-description">Designs intuitive and engaging user interfaces for avatar-based virtual meeting rooms, ensuring seamless attendee experiences.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="speaker-card">
|
|
<div class="speaker-card-avatar" aria-label="Speaker's photo placeholder">JK</div>
|
|
<h3>John Kim</h3>
|
|
<p class="speaker-title">VP of Engineering, StreamFlow Solutions</p>
|
|
<p class="speaker-description">Leads the development of robust video streaming and live chat infrastructures for high-demand virtual events.</p>
|
|
<div class="speaker-social-links">
|
|
<a href="#" aria-label="LinkedIn profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter profile">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</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>Sponsor/Exhibitor Section</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #6a3093; /* A deep purple, like Hopin/Airmeet branding */
|
|
--secondary-color: #a044ff; /* A lighter purple */
|
|
--accent-color: #00c7b7; /* A bright teal for accents */
|
|
--text-color: #333;
|
|
--light-text-color: #666;
|
|
--background-color: #f8f8f8;
|
|
--white-color: #ffffff;
|
|
--border-color: #eee;
|
|
--shadow-light: rgba(0, 0, 0, 0.05);
|
|
--shadow-medium: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* Section Styling */
|
|
.section-sponsor-exhibitor {
|
|
padding: 4rem 0;
|
|
background-color: var(--white-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-sponsor-exhibitor h2 {
|
|
text-align: center;
|
|
font-size: 2.8rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-sponsor-exhibitor p.section-description {
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
color: var(--light-text-color);
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem auto;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Sponsor Tiers */
|
|
.sponsor-tiers {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.tier-card {
|
|
background-color: var(--white-color);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px var(--shadow-medium);
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tier-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background-color: var(--primary-color);
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
.tier-card.platinum::before { background-color: #e5e4e2; /* Platinum */ }
|
|
.tier-card.gold::before { background-color: #ffd700; /* Gold */ }
|
|
.tier-card.silver::before { background-color: #c0c0c0; /* Silver */ }
|
|
.tier-card.bronze::before { background-color: #cd7f32; /* Bronze */ }
|
|
|
|
.tier-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 40px var(--shadow-medium);
|
|
}
|
|
|
|
.tier-card h3 {
|
|
font-size: 1.8rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
}
|
|
|
|
.tier-card h3::after {
|
|
content: '';
|
|
display: block;
|
|
width: 50px;
|
|
height: 3px;
|
|
background-color: var(--accent-color);
|
|
margin: 1rem auto 0;
|
|
}
|
|
|
|
.tier-card ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 2rem 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.tier-card ul li {
|
|
font-size: 1rem;
|
|
color: var(--light-text-color);
|
|
margin-bottom: 0.8rem;
|
|
position: relative;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.tier-card ul li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--accent-color);
|
|
font-weight: 700;
|
|
font-size: 1.2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tier-card .btn {
|
|
display: inline-block;
|
|
background-color: var(--primary-color);
|
|
color: var(--white-color);
|
|
padding: 0.9rem 2rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
box-shadow: 0 4px 15px var(--shadow-light);
|
|
}
|
|
|
|
.tier-card .btn:hover {
|
|
background-color: var(--secondary-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Call to Action */
|
|
.cta-sponsorship {
|
|
text-align: center;
|
|
margin-top: 4rem;
|
|
padding: 3rem;
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
border-radius: 12px;
|
|
color: var(--white-color);
|
|
box-shadow: 0 10px 30px var(--shadow-medium);
|
|
}
|
|
|
|
.cta-sponsorship h3 {
|
|
font-size: 2.2rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cta-sponsorship p {
|
|
font-size: 1.1rem;
|
|
max-width: 700px;
|
|
margin: 0 auto 2rem auto;
|
|
line-height: 1.8;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.cta-sponsorship .btn-secondary {
|
|
display: inline-block;
|
|
background-color: var(--accent-color);
|
|
color: var(--white-color);
|
|
padding: 1rem 2.5rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.cta-sponsorship .btn-secondary:hover {
|
|
background-color: #00a89d;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Exhibitor Booths / Virtual Expo */
|
|
.exhibitor-expo {
|
|
padding: 4rem 0;
|
|
background-color: var(--background-color);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.exhibitor-expo h2 {
|
|
text-align: center;
|
|
font-size: 2.8rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.exhibitor-expo p.section-description {
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
color: var(--light-text-color);
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem auto;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.expo-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background-color: var(--white-color);
|
|
border-radius: 12px;
|
|
box-shadow: 0 5px 20px var(--shadow-light);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 25px var(--shadow-medium);
|
|
}
|
|
|
|
.feature-card .icon {
|
|
font-size: 3rem;
|
|
color: var(--accent-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.5rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 0.95rem;
|
|
color: var(--light-text-color);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.section-sponsor-exhibitor h2,
|
|
.exhibitor-expo h2 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.section-sponsor-exhibitor p.section-description,
|
|
.exhibitor-expo p.section-description {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tier-card {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.tier-card h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.cta-sponsorship h3 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.cta-sponsorship p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.expo-features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.section-sponsor-exhibitor h2,
|
|
.exhibitor-expo h2 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.tier-card .btn,
|
|
.cta-sponsorship .btn-secondary {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="section-sponsor-exhibitor">
|
|
<div class="container">
|
|
<h2>Partner With Us: Sponsor & Exhibit</h2>
|
|
<p class="section-description">
|
|
Elevate your brand's presence and connect directly with a highly engaged audience.
|
|
Our platform offers unique opportunities for sponsors and exhibitors to showcase their innovations,
|
|
generate leads, and build meaningful relationships within a dynamic virtual environment.
|
|
</p>
|
|
|
|
<div class="sponsor-tiers">
|
|
<div class="tier-card platinum">
|
|
<h3>Platinum Sponsor</h3>
|
|
<ul>
|
|
<li><span class="visually-hidden">Checkmark: </span>Exclusive branding on main stage</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Dedicated virtual booth with premium features</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Keynote speaking slot opportunity</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Lead capture & detailed analytics</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Full-page ad in event program</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Priority attendee networking access</li>
|
|
</ul>
|
|
<a href="#" class="btn">Inquire Platinum</a>
|
|
</div>
|
|
|
|
<div class="tier-card gold">
|
|
<h3>Gold Sponsor</h3>
|
|
<ul>
|
|
<li><span class="visually-hidden">Checkmark: </span>Prominent logo placement throughout platform</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Enhanced virtual booth with video & chat</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Speaking opportunity in a breakout room</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Targeted lead generation tools</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Half-page ad in event program</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Advanced attendee engagement features</li>
|
|
</ul>
|
|
<a href="#" class="btn">Inquire Gold</a>
|
|
</div>
|
|
|
|
<div class="tier-card silver">
|
|
<h3>Silver Sponsor</h3>
|
|
<ul>
|
|
<li><span class="visually-hidden">Checkmark: </span>Logo visibility on event pages</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Standard virtual booth with media uploads</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Access to attendee chat & Q&A</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Basic lead reporting</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Quarter-page ad in event program</li>
|
|
<li><span class="visually-hidden">Checkmark: </span>Standard networking opportunities</li>
|
|
</ul>
|
|
<a href="#" class="btn">Inquire Silver</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-sponsorship">
|
|
<h3>Ready to Amplify Your Reach?</h3>
|
|
<p>
|
|
Join a growing community of innovators and thought leaders.
|
|
Our team is here to help you select the perfect partnership package
|
|
to meet your marketing and business development goals.
|
|
</p>
|
|
<a href="#" class="btn-secondary">Download Sponsorship Prospectus</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="exhibitor-expo">
|
|
<div class="container">
|
|
<h2>The Virtual Expo Experience</h2>
|
|
<p class="section-description">
|
|
Our innovative virtual expo hall recreates the energy and interactivity of a physical event,
|
|
providing exhibitors with powerful tools to engage visitors and generate qualified leads.
|
|
</p>
|
|
|
|
<div class="expo-features">
|
|
<div class="feature-card">
|
|
<span class="icon" aria-hidden="true">★</span> <!-- Star icon -->
|
|
<h3>Interactive Booths</h3>
|
|
<p>Customize your virtual booth with videos, brochures, product demos, and direct links to your sales team.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="icon" aria-hidden="true">✉</span> <!-- Mail icon -->
|
|
<h3>Live Chat & Video Meetings</h3>
|
|
<p>Engage visitors in real-time through text chat, one-on-one video calls, or group discussions.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="icon" aria-hidden="true">📈</span> <!-- Chart icon -->
|
|
<h3>Robust Analytics</h3>
|
|
<p>Gain insights into booth visits, content downloads, lead captures, and attendee interactions to measure ROI.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<span class="icon" aria-hidden="true">👤</span> <!-- Person icon -->
|
|
<h3>Spatial Networking</h3>
|
|
<p>Utilize our spatial audio or avatar-based rooms for organic, free-flowing networking within your booth or the expo hall.</p>
|
|
</div>
|
|
</div>
|
|
</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>Related Events Section</title>
|
|
<style>
|
|
/* Basic Reset & Box-sizing */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* Container for the section */
|
|
.section-container {
|
|
max-width: 1200px;
|
|
margin: 4rem auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
/* Section Header */
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
color: #1a1a1a;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.15rem;
|
|
color: #666;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Events Grid */
|
|
.events-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* Event Card */
|
|
.event-card {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.event-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.event-card-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #e0e0e0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
color: #777;
|
|
border-bottom: 1px solid #eee;
|
|
overflow: hidden; /* Ensure image doesn't break rounded corners */
|
|
}
|
|
|
|
.event-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.event-card-content {
|
|
padding: 1.5rem;
|
|
flex-grow: 1; /* Allow content to take available space */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.event-card-date {
|
|
font-size: 0.9rem;
|
|
color: #777;
|
|
margin-bottom: 0.75rem;
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.event-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #1a1a1a;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.event-card p {
|
|
font-size: 1rem;
|
|
color: #555;
|
|
margin-bottom: 1.25rem;
|
|
flex-grow: 1; /* Allow description to take available space */
|
|
}
|
|
|
|
.event-card-link {
|
|
display: inline-block;
|
|
background-color: #007bff; /* Primary brand color */
|
|
color: #fff;
|
|
padding: 0.8rem 1.5rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s ease;
|
|
text-align: center;
|
|
margin-top: auto; /* Push link to the bottom */
|
|
}
|
|
|
|
.event-card-link:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
/* Call to Action Button */
|
|
.section-footer {
|
|
text-align: center;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.all-events-button {
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
color: #007bff;
|
|
border: 2px solid #007bff;
|
|
padding: 1rem 2.5rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.all-events-button:hover {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.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.3rem;
|
|
}
|
|
|
|
.event-card p {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.event-card-link,
|
|
.all-events-button {
|
|
padding: 0.7rem 1.2rem;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.section-container {
|
|
padding: 0 1rem;
|
|
margin: 3rem auto;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.event-card-image {
|
|
height: 160px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="section-container" aria-labelledby="related-events-heading">
|
|
<header class="section-header">
|
|
<h2 id="related-events-heading">More Events You Might Like</h2>
|
|
<p>Explore a curated selection of upcoming virtual conferences, workshops, and networking sessions tailored to your interests.</p>
|
|
</header>
|
|
|
|
<div class="events-grid">
|
|
<article class="event-card">
|
|
<div class="event-card-image" aria-hidden="true">
|
|
<!-- Placeholder for Event Image -->
|
|
<img src="https://via.placeholder.com/400x200/007bff/FFFFFF?text=Event+Image+1" alt="Placeholder image for Global Tech Summit">
|
|
</div>
|
|
<div class="event-card-content">
|
|
<span class="event-card-date">Oct 26-28, 2023 | Virtual</span>
|
|
<h3>Global Tech Summit 2023</h3>
|
|
<p>Dive into the future of AI, blockchain, and cloud computing. Network with industry leaders and innovators.</p>
|
|
<a href="#" class="event-card-link" aria-label="View details for Global Tech Summit 2023">Learn More</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="event-card">
|
|
<div class="event-card-image" aria-hidden="true">
|
|
<!-- Placeholder for Event Image -->
|
|
<img src="https://via.placeholder.com/400x200/28a745/FFFFFF?text=Event+Image+2" alt="Placeholder image for Digital Marketing Conference">
|
|
</div>
|
|
<div class="event-card-content">
|
|
<span class="event-card-date">Nov 15-16, 2023 | Online</span>
|
|
<h3>Digital Marketing Conference 2023</h3>
|
|
<p>Uncover the latest strategies in SEO, content marketing, and social media. Expert-led workshops included.</p>
|
|
<a href="#" class="event-card-link" aria-label="View details for Digital Marketing Conference 2023">Learn More</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="event-card">
|
|
<div class="event-card-image" aria-hidden="true">
|
|
<!-- Placeholder for Event Image -->
|
|
<img src="https://via.placeholder.com/400x200/ffc107/333333?text=Event+Image+3" alt="Placeholder image for Startup Pitch Fest">
|
|
</div>
|
|
<div class="event-card-content">
|
|
<span class="event-card-date">Dec 01, 2023 | Virtual Arena</span>
|
|
<h3>Startup Pitch Fest: Winter Edition</h3>
|
|
<p>Witness groundbreaking innovations from emerging startups. Investors and mentors will be present.</p>
|
|
<a href="#" class="event-card-link" aria-label="View details for Startup Pitch Fest: Winter Edition">Learn More</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="event-card">
|
|
<div class="event-card-image" aria-hidden="true">
|
|
<!-- Placeholder for Event Image -->
|
|
<img src="https://via.placeholder.com/400x200/17a2b8/FFFFFF?text=Event+Image+4" alt="Placeholder image for Future of Work Summit">
|
|
</div>
|
|
<div class="event-card-content">
|
|
<span class="event-card-date">Jan 10-12, 2024 | Global Virtual</span>
|
|
<h3>Future of Work Summit 2024</h3>
|
|
<p>Explore trends in remote work, hybrid models, and workplace innovation. Keynotes from HR leaders.</p>
|
|
<a href="#" class="event-card-link" aria-label="View details for Future of Work Summit 2024">Learn More</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<footer class="section-footer">
|
|
<a href="#" class="all-events-button">View All Events</a>
|
|
</footer>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<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) |