1039 lines
34 KiB
HTML
1039 lines
34 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>Registration</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>Registration Form</title>
|
||
|
|
<style>
|
||
|
|
/* Basic Reset & Box-sizing */
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Body & Typography */
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: #333;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Section Styling */
|
||
|
|
.registration-section {
|
||
|
|
padding: 60px 20px;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 100vh; /* Ensure it takes full viewport height for demo */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Container for content within the section */
|
||
|
|
.registration-container {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 960px; /* Max width for content */
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
||
|
|
gap: 40px; /* Space between columns */
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
|
overflow: hidden; /* Contains inner elements */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Left Column: Description/Info */
|
||
|
|
.registration-info {
|
||
|
|
flex: 1 1 40%; /* Flex basis 40%, can shrink/grow */
|
||
|
|
min-width: 300px; /* Minimum width for this column */
|
||
|
|
padding: 40px;
|
||
|
|
background-color: #2e3a59; /* Dark background for a professional look */
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info h2 {
|
||
|
|
font-size: 2.5em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
line-height: 1.2;
|
||
|
|
color: #f0f4f8; /* Lighter color for heading */
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info p {
|
||
|
|
font-size: 1.1em;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info ul {
|
||
|
|
list-style: none;
|
||
|
|
padding-left: 0;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info ul li {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
font-size: 1em;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
opacity: 0.85;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info ul li::before {
|
||
|
|
content: '✔'; /* Checkmark icon */
|
||
|
|
color: #6a994e; /* Green for checkmark */
|
||
|
|
font-weight: bold;
|
||
|
|
display: inline-block;
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Right Column: Form */
|
||
|
|
.registration-form-wrapper {
|
||
|
|
flex: 1 1 60%; /* Flex basis 60%, can shrink/grow */
|
||
|
|
min-width: 320px; /* Minimum width for the form */
|
||
|
|
padding: 40px;
|
||
|
|
background-color: #fff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-form-wrapper h3 {
|
||
|
|
font-size: 1.8em;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
color: #2e3a59;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-form {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px; /* Space between form fields */
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 0; /* Gap handled by parent flex */
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #555;
|
||
|
|
font-size: 0.95em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input[type="text"],
|
||
|
|
.form-group input[type="email"],
|
||
|
|
.form-group input[type="password"],
|
||
|
|
.form-group select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 14px 18px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 1em;
|
||
|
|
color: #333;
|
||
|
|
background-color: #fdfdfd;
|
||
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input:focus,
|
||
|
|
.form-group select:focus {
|
||
|
|
border-color: #6a994e;
|
||
|
|
box-shadow: 0 0 0 3px rgba(106, 153, 78, 0.2);
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-actions {
|
||
|
|
margin-top: 30px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 300px;
|
||
|
|
padding: 15px 30px;
|
||
|
|
background-color: #6a994e; /* Primary button color */
|
||
|
|
color: #fff;
|
||
|
|
text-decoration: none;
|
||
|
|
border: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 1.1em;
|
||
|
|
font-weight: bold;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background-color: #5d8745;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-login-link {
|
||
|
|
margin-top: 20px;
|
||
|
|
font-size: 0.9em;
|
||
|
|
text-align: center;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-login-link a {
|
||
|
|
color: #6a994e;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-login-link a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Adjustments */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.registration-container {
|
||
|
|
flex-direction: column; /* Stack columns vertically */
|
||
|
|
margin: 20px; /* Add some margin on smaller screens */
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info,
|
||
|
|
.registration-form-wrapper {
|
||
|
|
flex: 1 1 100%; /* Take full width */
|
||
|
|
min-width: unset; /* Remove min-width constraints */
|
||
|
|
padding: 30px; /* Slightly less padding */
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info h2 {
|
||
|
|
font-size: 2em;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info p,
|
||
|
|
.registration-info ul {
|
||
|
|
text-align: center;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
.registration-info ul {
|
||
|
|
width: fit-content; /* Center list items effectively */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.registration-section {
|
||
|
|
padding: 30px 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info h2 {
|
||
|
|
font-size: 1.8em;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-info p {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.registration-form-wrapper h3 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
padding: 12px 20px;
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="registration-section" aria-labelledby="registration-heading">
|
||
|
|
<div class="registration-container">
|
||
|
|
<div class="registration-info">
|
||
|
|
<h2 id="registration-heading">Join Our Virtual Conference Platform</h2>
|
||
|
|
<p>Register now to unlock a world of interactive virtual events, seamless networking, and engaging content.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Access to diverse virtual conferences</li>
|
||
|
|
<li>Participate in dynamic breakout rooms</li>
|
||
|
|
<li>Engage in real-time live chat</li>
|
||
|
|
<li>Experience high-quality video streaming</li>
|
||
|
|
<li>Network with spatial audio or avatar rooms</li>
|
||
|
|
</ul>
|
||
|
|
<p>Connect, learn, and grow with industry leaders and peers from anywhere in the world.</p>
|
||
|
|
</div>
|
||
|
|
<div class="registration-form-wrapper">
|
||
|
|
<h3>Create Your Account</h3>
|
||
|
|
<form class="registration-form" action="#" method="POST">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="full-name">Full Name</label>
|
||
|
|
<input type="text" id="full-name" name="fullName" placeholder="John Doe" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Email Address</label>
|
||
|
|
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<input type="password" id="password" name="password" placeholder="********" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="confirm-password">Confirm Password</label>
|
||
|
|
<input type="password" id="confirm-password" name="confirmPassword" placeholder="********" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="user-type">I am a...</label>
|
||
|
|
<select id="user-type" name="userType">
|
||
|
|
<option value="">Select an option</option>
|
||
|
|
<option value="attendee">Attendee</option>
|
||
|
|
<option value="speaker">Speaker</option>
|
||
|
|
<option value="organizer">Organizer</option>
|
||
|
|
<option value="exhibitor">Exhibitor</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-actions">
|
||
|
|
<button type="submit" class="btn-primary">Register Now</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<p class="form-login-link">Already have an account? <a href="#login-section">Log In</a></p>
|
||
|
|
</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>Benefits Section</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;600;700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
/* Basic Reset & Box-sizing */
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: #333;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Container for responsiveness */
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Section Styling */
|
||
|
|
.benefits-section {
|
||
|
|
padding: 4rem 0;
|
||
|
|
background-color: #ffffff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-section h2 {
|
||
|
|
font-size: 2.8rem;
|
||
|
|
color: #1a2b4c;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-section p.lead {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
color: #555;
|
||
|
|
max-width: 700px;
|
||
|
|
margin: 0 auto 3rem auto;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Benefits Grid */
|
||
|
|
.benefits-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2.5rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card {
|
||
|
|
background-color: #f0f5ff; /* Light blue background for cards */
|
||
|
|
padding: 2.5rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start; /* Align content to the start */
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card:hover {
|
||
|
|
transform: translateY(-8px);
|
||
|
|
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card .icon-placeholder {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background-color: #4CAF50; /* Example primary color for icons */
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-size: 2rem;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1; /* For better icon centering */
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card h3 {
|
||
|
|
font-size: 1.7rem;
|
||
|
|
color: #1a2b4c;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card p {
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #666;
|
||
|
|
line-height: 1.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Call to Action */
|
||
|
|
.benefits-cta {
|
||
|
|
margin-top: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-cta .button {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: #007bff; /* Primary button color */
|
||
|
|
color: #ffffff;
|
||
|
|
padding: 1rem 2.5rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-cta .button:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Adjustments */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.benefits-section h2 {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-section p.lead {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-grid {
|
||
|
|
grid-template-columns: 1fr; /* Stack columns on smaller screens */
|
||
|
|
gap: 1.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card .icon-placeholder {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card h3 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefit-card p {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.benefits-section h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-section p.lead {
|
||
|
|
font-size: 1rem;
|
||
|
|
padding: 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.benefits-cta .button {
|
||
|
|
padding: 0.8rem 2rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="benefits-section" aria-labelledby="benefits-heading">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="benefits-heading">Why Choose Our Platform for Your Events?</h2>
|
||
|
|
<p class="lead">Discover the unparalleled advantages of hosting your virtual conferences and events with a platform built for engagement, interaction, and seamless execution.</p>
|
||
|
|
|
||
|
|
<div class="benefits-grid">
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">🌐</div>
|
||
|
|
<h3>Immersive Virtual Spaces</h3>
|
||
|
|
<p>Experience dynamic spatial audio and avatar-based rooms that mimic real-world interactions, fostering genuine connections among attendees.</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">🗣️</div>
|
||
|
|
<h3>Real-Time Engagement</h3>
|
||
|
|
<p>Facilitate vibrant discussions with integrated live chat, Q&A sessions, and interactive polls that keep your audience actively involved.</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">📺</div>
|
||
|
|
<h3>High-Quality Streaming</h3>
|
||
|
|
<p>Deliver crystal-clear video streaming for keynotes and presentations, ensuring a professional and uninterrupted viewing experience for all.</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">🤝</div>
|
||
|
|
<h3>Effortless Networking</h3>
|
||
|
|
<p>Break down virtual barriers with dedicated breakout rooms and intuitive networking features designed to spark meaningful collaborations.</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">📊</div>
|
||
|
|
<h3>Actionable Analytics</h3>
|
||
|
|
<p>Gain insights into attendee behavior, session popularity, and engagement metrics to optimize future events and measure success.</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="benefit-card">
|
||
|
|
<div class="icon-placeholder">⚙️</div>
|
||
|
|
<h3>Scalable & Reliable</h3>
|
||
|
|
<p>Our robust infrastructure supports events of any size, from small meetings to large-scale conferences, ensuring stability and performance.</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="benefits-cta">
|
||
|
|
<a href="#demo" class="button">See It In Action</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<section class="social-signup-section" aria-labelledby="socialSignupHeading">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="socialSignupHeading" class="section-title">Join Our Community</h2>
|
||
|
|
<p class="section-subtitle">Connect instantly using your preferred social account.</p>
|
||
|
|
|
||
|
|
<div class="social-options-wrapper">
|
||
|
|
<a href="#signup-google" class="social-button google-btn" aria-label="Sign up with Google">
|
||
|
|
<span class="social-icon">G</span>
|
||
|
|
<span class="social-text">Sign Up with Google</span>
|
||
|
|
</a>
|
||
|
|
<a href="#signup-facebook" class="social-button facebook-btn" aria-label="Sign up with Facebook">
|
||
|
|
<span class="social-icon">f</span>
|
||
|
|
<span class="social-text">Sign Up with Facebook</span>
|
||
|
|
</a>
|
||
|
|
<a href="#signup-linkedin" class="social-button linkedin-btn" aria-label="Sign up with LinkedIn">
|
||
|
|
<span class="social-icon">in</span>
|
||
|
|
<span class="social-text">Sign Up with LinkedIn</span>
|
||
|
|
</a>
|
||
|
|
<a href="#signup-apple" class="social-button apple-btn" aria-label="Sign up with Apple">
|
||
|
|
<span class="social-icon"></span>
|
||
|
|
<span class="social-text">Sign Up with Apple</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divider" role="separator">
|
||
|
|
<span class="divider-text">OR</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="alternative-signup-options">
|
||
|
|
<p>
|
||
|
|
<a href="#signup-email" class="email-signup-link">Continue with Email and Password</a>
|
||
|
|
</p>
|
||
|
|
<p class="existing-account">
|
||
|
|
Already have an account? <a href="#login" class="login-link">Log In</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="footer-section legal-links-section">
|
||
|
|
<h3 class="section-title">Legal & Policies</h3>
|
||
|
|
<nav aria-label="Legal and Policy Links">
|
||
|
|
<ul class="link-list">
|
||
|
|
<li><a href="#terms-of-service">Terms of Service</a></li>
|
||
|
|
<li><a href="#privacy-policy">Privacy Policy</a></li>
|
||
|
|
<li><a href="#cookie-policy">Cookie Policy</a></li>
|
||
|
|
<li><a href="#community-guidelines">Community Guidelines</a></li>
|
||
|
|
<li><a href="#accessibility-statement">Accessibility Statement</a></li>
|
||
|
|
<li><a href="#trust-safety">Trust & Safety</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</section>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Privacy Policy Link Section</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: #6B4EEB; /* A vibrant purple often seen in tech platforms */
|
||
|
|
--text-color-dark: #1A202C; /* Dark charcoal for primary text */
|
||
|
|
--text-color-light: #4A5568; /* Slightly lighter grey for secondary text */
|
||
|
|
--background-color-light: #F7FAFC; /* Light background for sections */
|
||
|
|
--border-color: #E2E8F0; /* Light grey for borders */
|
||
|
|
--footer-bg-color: #1A202C; /* Dark background for footer */
|
||
|
|
--footer-text-color: #CBD5E0; /* Light grey for footer text */
|
||
|
|
--footer-link-color: #A0AEC0; /* Even lighter grey for footer links */
|
||
|
|
--font-family: 'Inter', sans-serif;
|
||
|
|
--spacing-sm: 1rem;
|
||
|
|
--spacing-md: 2rem;
|
||
|
|
--spacing-lg: 3rem;
|
||
|
|
--max-width: 1200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: var(--font-family);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
background-color: #ffffff; /* Default background */
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: var(--max-width);
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 var(--spacing-md);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Privacy Policy Link Section Styling --- */
|
||
|
|
.privacy-link-section {
|
||
|
|
background-color: var(--footer-bg-color); /* Dark background for this specific section, simulating footer context */
|
||
|
|
padding: var(--spacing-lg) 0;
|
||
|
|
color: var(--footer-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--spacing-md);
|
||
|
|
align-items: center; /* Center items for a clean look */
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: var(--spacing-sm);
|
||
|
|
color: #ffffff; /* White color for heading on dark background */
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section p {
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
margin-bottom: var(--spacing-md);
|
||
|
|
max-width: 700px; /* Constrain width for readability */
|
||
|
|
color: var(--footer-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap; /* Allow links to wrap on smaller screens */
|
||
|
|
justify-content: center;
|
||
|
|
gap: var(--spacing-md); /* Space between links */
|
||
|
|
margin-top: var(--spacing-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a {
|
||
|
|
display: inline-flex; /* For better padding/sizing */
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: #ffffff;
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 8px; /* Slightly rounded corners */
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1rem;
|
||
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a:hover {
|
||
|
|
background-color: #5A3EC9; /* Slightly darker purple on hover */
|
||
|
|
transform: translateY(-2px); /* Slight lift effect */
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a:active {
|
||
|
|
transform: translateY(0); /* Press effect */
|
||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a.secondary-link {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 1px solid var(--footer-link-color);
|
||
|
|
color: var(--footer-link-color);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a.secondary-link:hover {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
color: #ffffff;
|
||
|
|
border-color: #ffffff;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive adjustments */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.privacy-link-section h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section p {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links {
|
||
|
|
flex-direction: column; /* Stack links vertically on small screens */
|
||
|
|
gap: var(--spacing-sm);
|
||
|
|
width: 100%; /* Take full width */
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section .privacy-links a {
|
||
|
|
width: calc(100% - 3rem); /* Adjust width considering padding */
|
||
|
|
text-align: center;
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.container {
|
||
|
|
padding: 0 var(--spacing-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-link-section {
|
||
|
|
padding: var(--spacing-md) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Wireframe Placeholder Styling --- */
|
||
|
|
.wireframe-placeholder {
|
||
|
|
min-height: 100px;
|
||
|
|
background-color: #E2E8F0;
|
||
|
|
border: 1px dashed #A0AEC0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #4A5568;
|
||
|
|
font-style: italic;
|
||
|
|
margin-bottom: var(--spacing-md);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-placeholder {
|
||
|
|
min-height: 80px;
|
||
|
|
background-color: #F7FAFC;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--text-color-light);
|
||
|
|
font-style: italic;
|
||
|
|
margin-bottom: var(--spacing-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-placeholder {
|
||
|
|
min-height: 400px;
|
||
|
|
background-color: #F7FAFC;
|
||
|
|
border: 1px dashed var(--border-color);
|
||
|
|
margin-bottom: var(--spacing-lg);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--text-color-light);
|
||
|
|
font-style: italic;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-placeholder {
|
||
|
|
min-height: 200px;
|
||
|
|
background-color: var(--footer-bg-color);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--footer-text-color);
|
||
|
|
font-style: italic;
|
||
|
|
padding: var(--spacing-lg) 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Wireframe Header Placeholder -->
|
||
|
|
<div class="header-placeholder">
|
||
|
|
<div class="container">
|
||
|
|
[Header / Navigation Bar]
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Wireframe Main Content Placeholder -->
|
||
|
|
<div class="content-placeholder">
|
||
|
|
<div class="container">
|
||
|
|
[Main Page Content Section]
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Privacy Policy Link Section -->
|
||
|
|
<section class="privacy-link-section" aria-labelledby="privacyHeading">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="privacyHeading">Your Data, Your Control. Learn More.</h2>
|
||
|
|
<p>
|
||
|
|
We prioritize the security and privacy of your information on our virtual conference platform.
|
||
|
|
Understand how we collect, use, and protect your data, ensuring a transparent and secure experience
|
||
|
|
for all attendees and organizers.
|
||
|
|
</p>
|
||
|
|
<div class="privacy-links">
|
||
|
|
<a href="#privacy-policy" class="button button-primary">Read Our Privacy Policy</a>
|
||
|
|
<a href="#terms-of-service" class="secondary-link">Terms of Service</a>
|
||
|
|
<a href="#cookie-policy" class="secondary-link">Cookie Policy</a>
|
||
|
|
</div>
|
||
|
|
<p class="wireframe-placeholder">
|
||
|
|
[Optional: Small print / Copyright text, if not in main footer]
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Wireframe Footer Placeholder -->
|
||
|
|
<div class="footer-placeholder">
|
||
|
|
<div class="container">
|
||
|
|
[Main Footer Section]
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</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)
|