DeepSeek DeepSeek V4 Pro 0813 – Social Media
via Together · Generated
- AIMAC Debt 3.05
- Cost $0.10
- Total Violations 3
- HTML Size 89 KB
- Em Dashes 13
Screenshot
View Live Page
Accessibility Issues Found
3 Serious
-
color-contrast serious 3 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="trending-badge">#1 Trending</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nexus — Where Conversations Come Alive. Join the social network built for creators, communities, and real connections. Share moments, discover trends, and grow your reach.">
<meta name="theme-color" content="#6C3BF4">
<title>Nexus — Where Conversations Come Alive</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&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6C3BF4;
--primary-dark: #5B21B6;
--primary-light: #EDE9FE;
--secondary: #FF6B6B;
--accent: #FFD93D;
--success: #10B981;
--dark: #1A1A2E;
--dark-soft: #2D2D44;
--text: #1F2937;
--text-muted: #6B7280;
--text-light: #9CA3AF;
--bg: #F8F7FC;
--bg-white: #FFFFFF;
--border: #E5E7EB;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--max-width: 1200px;
--header-height: 72px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--text);
background-color: var(--bg);
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition);
}
ul,
ol {
list-style: none;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
/* ============ HEADER ============ */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--transition);
}
.site-header.scrolled {
box-shadow: var(--shadow-md);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: 24px;
}
.logo-group {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.logo-placeholder {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--primary), #8B5CF6);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
color: #fff;
font-family: var(--font-heading);
letter-spacing: -0.5px;
box-shadow: 0 4px 12px rgba(108, 59, 244, 0.3);
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.35rem;
color: var(--dark);
letter-spacing: -0.5px;
}
.logo-tagline {
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.main-nav a {
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
transition: all var(--transition);
position: relative;
white-space: nowrap;
}
.main-nav a:hover {
color: var(--primary);
background: var(--primary-light);
}
.main-nav a.active {
color: var(--primary);
background: var(--primary-light);
font-weight: 600;
}
.main-nav a.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: var(--primary);
border-radius: var(--radius-full);
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.9rem;
font-family: var(--font-body);
cursor: pointer;
border: none;
transition: all var(--transition);
text-align: center;
line-height: 1.4;
white-space: nowrap;
}
.btn-primary {
background: var(--primary);
color: #fff;
box-shadow: 0 4px 16px rgba(108, 59, 244, 0.35);
}
.btn-primary:hover {
background: var(--primary-dark);
box-shadow: 0 6px 24px rgba(108, 59, 244, 0.45);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--bg-white);
color: var(--text);
border: 1.5px solid var(--border);
}
.btn-secondary:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-light);
}
.btn-outline-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
.btn-sm {
padding: 7px 16px;
font-size: 0.82rem;
}
.btn-lg {
padding: 14px 32px;
font-size: 1rem;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: var(--radius-sm);
color: var(--text);
}
.mobile-menu-toggle:hover {
background: var(--primary-light);
color: var(--primary);
}
/* ============ HERO ============ */
.hero {
position: relative;
background: linear-gradient(160deg, #1A1A2E 0%, #2D1B69 40%, #4C1D95 70%, #6C3BF4 100%);
color: #fff;
padding: 80px 0 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 107, 107, 0.25) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 217, 61, 0.15) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-content h1 {
font-family: var(--font-heading);
font-size: 3.2rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -1.5px;
margin-bottom: 20px;
}
.hero-content h1 .gradient-text {
background: linear-gradient(135deg, #FFD93D, #FF6B6B, #FF9A9E);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.8);
max-width: 520px;
margin-bottom: 32px;
line-height: 1.8;
}
.hero-cta-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.hero-stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.hero-stat {
text-align: left;
}
.hero-stat-number {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: #FFD93D;
letter-spacing: -0.5px;
}
.hero-stat-label {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image-wrapper {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
border: 2px solid rgba(255, 255, 255, 0.15);
width: 100%;
max-width: 520px;
}
.hero-image-wrapper img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: var(--radius-xl);
}
.hero-floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-radius: var(--radius-md);
padding: 16px 20px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
animation: float 4s ease-in-out infinite;
}
.hero-floating-card.card-1 {
top: 20px;
left: -30px;
animation-delay: 0s;
}
.hero-floating-card.card-2 {
bottom: 30px;
right: -20px;
animation-delay: 2s;
}
.hero-floating-card .avatar-sm {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.hero-floating-card .fc-text {
font-size: 0.8rem;
font-weight: 600;
color: var(--dark);
}
.hero-floating-card .fc-sub {
font-size: 0.7rem;
color: var(--text-muted);
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* ============ SECTION COMMON ============ */
.section {
padding: 80px 0;
}
.section-alt {
background: var(--bg-white);
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 50px;
}
.section-header h2 {
font-family: var(--font-heading);
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -1px;
color: var(--dark);
margin-bottom: 12px;
}
.section-header p {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.7;
}
.section-tag {
display: inline-block;
padding: 6px 16px;
background: var(--primary-light);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
/* ============ TRENDING ============ */
.trending-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.trending-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition);
border: 1px solid var(--border);
cursor: pointer;
}
.trending-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: var(--primary);
}
.trending-card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.trending-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.trending-card:hover .trending-card-image img {
transform: scale(1.05);
}
.trending-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--secondary);
color: #fff;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.trending-card-body {
padding: 20px;
}
.trending-card-body h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.trending-card-body p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 14px;
}
.trending-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
}
.trending-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.hashtag {
color: var(--primary);
font-weight: 600;
}
/* ============ FEATURED POSTS ============ */
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.post-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.post-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.post-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.post-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.post-author {
font-weight: 600;
font-size: 0.9rem;
color: var(--dark);
}
.post-time {
font-size: 0.75rem;
color: var(--text-muted);
}
.post-card-image {
height: 220px;
overflow: hidden;
}
.post-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.post-card:hover .post-card-image img {
transform: scale(1.04);
}
.post-card-body {
padding: 18px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.post-card-body p {
color: var(--text);
font-size: 0.9rem;
line-height: 1.65;
margin-bottom: 14px;
flex: 1;
}
.post-engagement {
display: flex;
gap: 20px;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.post-engagement span {
display: flex;
align-items: center;
gap: 5px;
}
/* ============ RECOMMENDED ============ */
.recommended-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.recommended-groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.group-card {
background: var(--bg-white);
border-radius: var(--radius-md);
padding: 20px;
border: 1px solid var(--border);
transition: all var(--transition);
display: flex;
align-items: center;
gap: 14px;
}
.group-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.group-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.group-info h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 2px;
}
.group-info p {
font-size: 0.8rem;
color: var(--text-muted);
}
.sponsored-card {
background: linear-gradient(135deg, #1A1A2E, #2D1B69);
border-radius: var(--radius-lg);
padding: 28px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.sponsored-card::before {
content: '';
position: absolute;
top: -40%;
right: -30%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 107, 107, 0.3), transparent);
border-radius: 50%;
}
.sponsored-tag {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
margin-bottom: 8px;
}
.sponsored-card h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.3px;
}
.sponsored-card p {
color: rgba(255, 255, 255, 0.75);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 18px;
}
/* ============ EVENTS ============ */
.events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.event-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: all var(--transition);
}
.event-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.event-card-image {
height: 180px;
overflow: hidden;
position: relative;
}
.event-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-date-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--bg-white);
border-radius: var(--radius-sm);
padding: 8px 12px;
text-align: center;
box-shadow: var(--shadow-sm);
font-weight: 700;
font-size: 0.8rem;
color: var(--dark);
line-height: 1.2;
}
.event-date-badge .day {
font-size: 1.3rem;
font-family: var(--font-heading);
color: var(--primary);
}
.event-card-body {
padding: 20px;
}
.event-card-body h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.event-location {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 4px;
}
.event-card-body p {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 14px;
}
/* ============ CONTENT SCHEDULER ============ */
.scheduler-section {
background: linear-gradient(160deg, #1A1A2E 0%, #2D1B69 50%, #4C1D95 100%);
color: #fff;
padding: 80px 0;
}
.scheduler-section .section-header h2 {
color: #fff;
}
.scheduler-section .section-header p {
color: rgba(255, 255, 255, 0.7);
}
.scheduler-section .section-tag {
background: rgba(255, 255, 255, 0.15);
color: #FFD93D;
}
.scheduler-container {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
border-radius: var(--radius-xl);
padding: 32px;
border: 1px solid rgba(255, 255, 255, 0.15);
max-width: 800px;
margin: 0 auto;
}
.scheduler-tabs {
display: flex;
gap: 6px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.scheduler-tab {
padding: 8px 18px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: all var(--transition);
font-family: var(--font-body);
}
.scheduler-tab:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.scheduler-tab.active {
background: var(--primary);
border-color: var(--primary);
color: #fff;
box-shadow: 0 4px 16px rgba(108, 59, 244, 0.4);
}
.scheduler-timeline {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
}
.scheduler-timeline::-webkit-scrollbar {
width: 4px;
}
.scheduler-timeline::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.scheduler-timeline::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.scheduled-post {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
padding: 16px 20px;
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
gap: 16px;
}
.scheduled-post:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.scheduled-post.expanded {
background: rgba(255, 255, 255, 0.14);
border-color: var(--primary);
}
.scheduled-post-time {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
color: #FFD93D;
min-width: 60px;
flex-shrink: 0;
}
.scheduled-post-content {
flex: 1;
min-width: 0;
}
.scheduled-post-content .sp-text {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.scheduled-post.expanded .sp-text {
-webkit-line-clamp: unset;
}
.scheduled-post-platform {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.scheduled-post-status {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-scheduled {
background: #FFD93D;
}
.status-published {
background: var(--success);
}
.status-draft {
background: var(--text-light);
}
.scheduler-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.scheduler-form {
display: none;
margin-top: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.scheduler-form.visible {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scheduler-form label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scheduler-form input,
.scheduler-form textarea,
.scheduler-form select {
width: 100%;
padding: 10px 14px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-family: var(--font-body);
font-size: 0.9rem;
margin-bottom: 12px;
transition: all var(--transition);
}
.scheduler-form input:focus,
.scheduler-form textarea:focus,
.scheduler-form select:focus {
outline: none;
border-color: var(--primary);
background: rgba(255, 255, 255, 0.12);
}
.scheduler-form input::placeholder,
.scheduler-form textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.scheduler-form select option {
background: var(--dark);
color: #fff;
}
.scheduler-form textarea {
resize: vertical;
min-height: 80px;
}
.toast {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--success);
color: #fff;
padding: 14px 24px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.9rem;
box-shadow: var(--shadow-lg);
z-index: 2000;
transform: translateY(100px);
opacity: 0;
transition: all var(--transition);
pointer-events: none;
}
.toast.visible {
transform: translateY(0);
opacity: 1;
}
/* ============ TESTIMONIALS ============ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.testimonial-quote {
font-size: 0.95rem;
color: var(--text);
line-height: 1.7;
margin-bottom: 20px;
flex: 1;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-author .ta-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--dark);
}
.testimonial-author .ta-role {
font-size: 0.78rem;
color: var(--text-muted);
}
.testimonial-stars {
color: #FFD93D;
font-size: 0.9rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
/* ============ FAQ ============ */
.faq-list {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--bg-white);
border-radius: var(--radius-md);
border: 1px solid var(--border);
overflow: hidden;
transition: all var(--transition);
}
.faq-item:hover {
border-color: var(--primary);
}
.faq-question {
padding: 18px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-weight: 600;
font-size: 0.95rem;
color: var(--dark);
user-select: none;
transition: all var(--transition);
}
.faq-question:hover {
color: var(--primary);
}
.faq-icon {
font-size: 1.2rem;
color: var(--text-muted);
transition: transform var(--transition);
flex-shrink: 0;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
color: var(--primary);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow), padding var(--transition);
padding: 0 24px;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 24px 20px;
}
.faq-answer p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.7;
}
/* ============ FOOTER ============ */
.site-footer {
background: var(--dark);
color: rgba(255, 255, 255, 0.7);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand .logo-name {
color: #fff;
}
.footer-brand .logo-tagline {
color: rgba(255, 255, 255, 0.5);
}
.footer-brand p {
font-size: 0.9rem;
line-height: 1.7;
margin-top: 16px;
color: rgba(255, 255, 255, 0.6);
max-width: 300px;
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 20px;
}
.footer-social a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.footer-social a:hover {
background: var(--primary);
color: #fff;
transform: translateY(-2px);
}
.footer-col h4 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: #fff;
margin-bottom: 16px;
letter-spacing: -0.3px;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.6);
transition: color var(--transition);
}
.footer-col ul li a:hover {
color: #fff;
}
.footer-bottom {
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.5);
transition: color var(--transition);
}
.footer-bottom-links a:hover {
color: #fff;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.hero-cta-group {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-visual {
order: -1;
}
.hero-image-wrapper {
max-width: 400px;
margin: 0 auto;
}
.hero-image-wrapper img {
height: 300px;
}
.hero-floating-card.card-1 {
left: 10px;
}
.hero-floating-card.card-2 {
right: 10px;
}
.trending-grid,
.posts-grid,
.events-grid,
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.recommended-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-nav {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background: var(--bg-white);
flex-direction: column;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-md);
gap: 4px;
}
.main-nav.open {
display: flex;
}
.main-nav a {
padding: 12px 16px;
width: 100%;
text-align: left;
}
.mobile-menu-toggle {
display: block;
}
.header-actions .btn-secondary {
display: none;
}
.hero {
padding: 50px 0 70px;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-stats {
gap: 20px;
}
.hero-stat-number {
font-size: 1.5rem;
}
.section {
padding: 50px 0;
}
.section-header h2 {
font-size: 1.8rem;
}
.trending-grid,
.posts-grid,
.events-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
.recommended-groups {
grid-template-columns: 1fr;
}
.scheduler-container {
padding: 20px;
}
.scheduler-tabs {
gap: 4px;
}
.scheduler-tab {
padding: 6px 12px;
font-size: 0.75rem;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.hero-floating-card {
display: none;
}
}
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.hero-content h1 {
font-size: 1.7rem;
}
.btn-lg {
padding: 12px 24px;
font-size: 0.9rem;
}
.hero-cta-group {
flex-direction: column;
align-items: center;
}
.hero-stats {
flex-direction: column;
align-items: center;
gap: 12px;
}
.scheduler-container {
padding: 16px;
}
.scheduled-post {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.scheduled-post-time {
min-width: auto;
}
}
</style>
</head>
<body>
<!-- ============ HEADER ============ -->
<header class="site-header" id="siteHeader" role="banner">
<div class="container header-inner">
<div class="logo-group">
<div class="logo-placeholder" aria-hidden="true">N</div>
<div class="logo-text">
<span class="logo-name">Nexus</span>
<span class="logo-tagline">Where Conversations Come Alive</span>
</div>
</div>
<nav class="main-nav" id="mainNav" role="navigation" aria-label="Primary navigation">
<a href="#" class="active">Home</a>
<a href="#trending">Explore</a>
<a href="#events">Events</a>
<a href="#communities">Communities</a>
<a href="#settings">Settings</a>
<a href="#help">Help</a>
<a href="#profile">Profile</a>
</nav>
<div class="header-actions">
<a href="#scheduler" class="btn btn-primary btn-sm">Create Post</a>
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation menu" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
</div>
</div>
</header>
<!-- ============ HERO ============ -->
<section class="hero" id="home" role="region" aria-label="Hero">
<div class="container hero-inner">
<div class="hero-content">
<h1>Connect. Share.<br><span class="gradient-text">Go Viral.</span></h1>
<p class="hero-subtitle">
Nexus is the social network built for creators, communities, and real conversations. Discover trending hashtags, grow your reach, and turn every post into a moment worth sharing.
</p>
<div class="hero-cta-group">
<a href="#scheduler" class="btn btn-primary btn-lg">Create Post</a>
<a href="#trending" class="btn btn-outline-light btn-lg">Explore Trending</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<div class="hero-stat-number">12M+</div>
<div class="hero-stat-label">Active Creators</div>
</div>
<div class="hero-stat">
<div class="hero-stat-number">4.8B</div>
<div class="hero-stat-label">Monthly Engagements</div>
</div>
<div class="hero-stat">
<div class="hero-stat-number">190+</div>
<div class="hero-stat-label">Countries Connected</div>
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-image-wrapper">
<img src="https://picsum.photos/800/600?grayscale&blur=1" alt="A vibrant community of people connecting and sharing moments on Nexus" loading="eager">
</div>
<div class="hero-floating-card card-1">
<img src="https://i.pravatar.cc/80?u=nexus-user-1" alt="User avatar" class="avatar-sm" loading="lazy">
<div>
<div class="fc-text">@maya_creates</div>
<div class="fc-sub">Just hit 100K followers! 🎉</div>
</div>
</div>
<div class="hero-floating-card card-2">
<img src="https://i.pravatar.cc/80?u=nexus-user-2" alt="User avatar" class="avatar-sm" loading="lazy">
<div>
<div class="fc-text">#NexusTrending</div>
<div class="fc-sub">2.3M posts this week</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ TRENDING NOW ============ -->
<section class="section" id="trending" role="region" aria-label="Trending now">
<div class="container">
<div class="section-header">
<span class="section-tag">🔥 Trending Now</span>
<h2>Viral Moments & Hot Hashtags</h2>
<p>Stay ahead of the curve with the conversations everyone is talking about. These trending topics are driving engagement across the Nexus community right now.</p>
</div>
<div class="trending-grid">
<article class="trending-card">
<div class="trending-card-image">
<img src="https://picsum.photos/600/400?random=11" alt="A vibrant sunset over a city skyline, part of a trending photography challenge" loading="lazy">
<span class="trending-badge">#1 Trending</span>
</div>
<div class="trending-card-body">
<h3>#GoldenHourChallenge</h3>
<p>Photographers and casual creators alike are flooding feeds with stunning golden hour captures. The hashtag has generated over 4.2 million posts in just 72 hours, with engagement rates up 340% compared to last week.</p>
<div class="trending-meta">
<span>📈 4.2M posts</span>
<span>💬 18.7M reactions</span>
<span class="hashtag">#GoldenHourChallenge</span>
</div>
</div>
</article>
<article class="trending-card">
<div class="trending-card-image">
<img src="https://picsum.photos/600/400?random=12" alt="A group of friends laughing together at a community meetup" loading="lazy">
<span class="trending-badge">🔥 Rising Fast</span>
</div>
<div class="trending-card-body">
<h3>#CommunityOverCompetition</h3>
<p>A grassroots movement celebrating collaboration over rivalry has taken Nexus by storm. Creators are tagging their peers, sharing resources, and building genuine connections that extend far beyond the platform.</p>
<div class="trending-meta">
<span>📈 1.8M posts</span>
<span>💬 9.2M reactions</span>
<span class="hashtag">#CommunityOverCompetition</span>
</div>
</div>
</article>
<article class="trending-card">
<div class="trending-card-image">
<img src="https://picsum.photos/600/400?random=13" alt="A creative workspace with a laptop showing a live stream" loading="lazy">
<span class="trending-badge">⚡ Live Now</span>
</div>
<div class="trending-card-body">
<h3>#CreatorConfessions</h3>
<p>Influencers and everyday users are opening up about the realities of content creation — the wins, the struggles, and everything in between. This raw, honest conversation is resonating deeply with the community.</p>
<div class="trending-meta">
<span>📈 890K posts</span>
<span>💬 5.4M reactions</span>
<span class="hashtag">#CreatorConfessions</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ FEATURED POSTS ============ -->
<section class="section section-alt" id="featured" role="region" aria-label="Featured posts">
<div class="container">
<div class="section-header">
<span class="section-tag">⭐ Featured Posts</span>
<h2>What the Community Is Loving</h2>
<p>Hand-picked posts from across the Nexus network — showcasing the creativity, authenticity, and passion that makes this community extraordinary.</p>
</div>
<div class="posts-grid">
<article class="post-card">
<div class="post-card-header">
<img src="https://i.pravatar.cc/100?u=nexus-post-1" alt="Avatar of Elena Rodriguez" class="post-avatar" loading="lazy">
<div>
<div class="post-author">Elena Rodriguez</div>
<div class="post-time">2 hours ago · 🌍 Public</div>
</div>
</div>
<div class="post-card-image">
<img src="https://picsum.photos/600/400?random=21" alt="A beautifully plated dish from a home cooking series" loading="lazy">
</div>
<div class="post-card-body">
<p>Just wrapped up my 30-day cooking challenge! 🍳 What started as a personal goal turned into an incredible journey with 12,000+ of you following along. The support in the comments kept me going every single day. What challenge should I tackle next?</p>
<div class="post-engagement">
<span>❤️ 3,842</span>
<span>💬 1,207</span>
<span>🔁 894</span>
<span>📊 Reach: 48K</span>
</div>
</div>
</article>
<article class="post-card">
<div class="post-card-header">
<img src="https://i.pravatar.cc/100?u=nexus-post-2" alt="Avatar of Marcus Chen" class="post-avatar" loading="lazy">
<div>
<div class="post-author">Marcus Chen</div>
<div class="post-time">5 hours ago · 🌍 Public</div>
</div>
</div>
<div class="post-card-image">
<img src="https://picsum.photos/600/400?random=22" alt="A stunning landscape from a travel photography series" loading="lazy">
</div>
<div class="post-card-body">
<p>Three years ago I posted my first photo on Nexus with zero followers and a lot of doubt. Today, I'm celebrating 250K of you who've joined me on this journey. This platform gave me a voice, a community, and a career. Thank you for believing in me. 🙏</p>
<div class="post-engagement">
<span>❤️ 12,456</span>
<span>💬 3,891</span>
<span>🔁 2,340</span>
<span>📊 Reach: 210K</span>
</div>
</div>
</article>
<article class="post-card">
<div class="post-card-header">
<img src="https://i.pravatar.cc/100?u=nexus-post-3" alt="Avatar of Aisha Patel" class="post-avatar" loading="lazy">
<div>
<div class="post-author">Aisha Patel</div>
<div class="post-time">8 hours ago · 👥 Friends</div>
</div>
</div>
<div class="post-card-image">
<img src="https://picsum.photos/600/400?random=23" alt="A community garden project with volunteers working together" loading="lazy">
</div>
<div class="post-card-body">
<p>Our neighborhood community garden officially opened today! 🌱 Six months of planning, 40+ volunteers, and countless hours of hard work. This is what happens when a community comes together. If you're in the area, come say hi — we'd love to meet you!</p>
<div class="post-engagement">
<span>❤️ 2,187</span>
<span>💬 642</span>
<span>🔁 318</span>
<span>📊 Reach: 15K</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ RECOMMENDED COMMUNITIES ============ -->
<section class="section" id="communities" role="region" aria-label="Recommended communities">
<div class="container">
<div class="section-header">
<span class="section-tag">👥 For You</span>
<h2>Recommended Communities & Groups</h2>
<p>Discover spaces where you belong. These communities are curated based on your interests, engagement history, and the people you already follow.</p>
</div>
<div class="recommended-grid">
<div class="recommended-groups">
<div class="group-card">
<div class="group-icon">📸</div>
<div class="group-info">
<h4>Street Photography Collective</h4>
<p>48K members · 320 posts today</p>
</div>
</div>
<div class="group-card">
<div class="group-icon">🎨</div>
<div class="group-info">
<h4>Digital Artists Unite</h4>
<p>32K members · 180 posts today</p>
</div>
</div>
<div class="group-card">
<div class="group-icon">🌱</div>
<div class="group-info">
<h4>Sustainable Living Hub</h4>
<p>21K members · 95 posts today</p>
</div>
</div>
<div class="group-card">
<div class="group-icon">🎧</div>
<div class="group-info">
<h4>Indie Music Discovery</h4>
<p>15K members · 60 posts today</p>
</div>
</div>
</div>
<div class="sponsored-card">
<span class="sponsored-tag">Sponsored</span>
<h3>Nexus Pro for Creators</h3>
<p>Unlock advanced analytics, priority reach, and exclusive monetization tools. Join 50,000+ creators who've taken their content to the next level.</p>
<a href="#" class="btn btn-primary btn-sm" style="align-self:flex-start;">Learn More</a>
</div>
</div>
</div>
</section>
<!-- ============ EVENT HIGHLIGHTS ============ -->
<section class="section section-alt" id="events" role="region" aria-label="Event highlights">
<div class="container">
<div class="section-header">
<span class="section-tag">📅 Event Highlights</span>
<h2>Upcoming Community Events</h2>
<p>From virtual meetups to in-person gatherings, these are the events bringing the Nexus community together. RSVP now and don't miss out.</p>
</div>
<div class="events-grid">
<article class="event-card">
<div class="event-card-image">
<img src="https://picsum.photos/600/400?random=31" alt="A conference stage with speakers and a large audience" loading="lazy">
<div class="event-date-badge">
<span class="day">15</span><br>MAR
</div>
</div>
<div class="event-card-body">
<h3>Nexus Creator Summit 2025</h3>
<div class="event-location">📍 Virtual · Global</div>
<p>Join 200+ top creators for a full day of workshops, panel discussions, and networking. Learn how to grow your reach, master the algorithm, and build a sustainable content career.</p>
<a href="#" class="btn btn-secondary btn-sm">RSVP Now</a>
</div>
</article>
<article class="event-card">
<div class="event-card-image">
<img src="https://picsum.photos/600/400?random=32" alt="A community meetup in a park with people socializing" loading="lazy">
<div class="event-date-badge">
<span class="day">22</span><br>MAR
</div>
</div>
<div class="event-card-body">
<h3>Community Meetup: Austin</h3>
<div class="event-location">📍 Zilker Park, Austin, TX</div>
<p>Connect with fellow Nexus users in the Austin area for an afternoon of conversation, collaboration, and fun. Bring your best stories and your favorite camera — we'll be capturing the day together.</p>
<a href="#" class="btn btn-secondary btn-sm">RSVP Now</a>
</div>
</article>
<article class="event-card">
<div class="event-card-image">
<img src="https://picsum.photos/600/400?random=33" alt="A live streaming setup with professional lighting and camera equipment" loading="lazy">
<div class="event-date-badge">
<span class="day">05</span><br>APR
</div>
</div>
<div class="event-card-body">
<h3>Live Q&A: Growing Your Reach</h3>
<div class="event-location">📍 Nexus Live · Online</div>
<p>Our product team and top creators answer your burning questions about hashtags, engagement, and the Nexus algorithm. Submit your questions in advance and tune in live for real-time answers.</p>
<a href="#" class="btn btn-secondary btn-sm">RSVP Now</a>
</div>
</article>
</div>
</div>
</section>
<!-- ============ CONTENT SCHEDULER (INTERACTIVE) ============ -->
<section class="scheduler-section" id="scheduler" role="region" aria-label="Content scheduler">
<div class="container">
<div class="section-header">
<span class="section-tag">📝 Content Scheduler</span>
<h2>Plan Your Posts. Perfect Your Timing.</h2>
<p>Schedule your content in advance and let Nexus handle the rest. Click on any scheduled post to expand details, or create a new post to add to your queue.</p>
</div>
<div class="scheduler-container">
<div class="scheduler-tabs" id="schedulerTabs" role="tablist" aria-label="Days of the week">
<button class="scheduler-tab active" data-day="mon" role="tab" aria-selected="true">Mon</button>
<button class="scheduler-tab" data-day="tue" role="tab" aria-selected="false">Tue</button>
<button class="scheduler-tab" data-day="wed" role="tab" aria-selected="false">Wed</button>
<button class="scheduler-tab" data-day="thu" role="tab" aria-selected="false">Thu</button>
<button class="scheduler-tab" data-day="fri" role="tab" aria-selected="false">Fri</button>
<button class="scheduler-tab" data-day="sat" role="tab" aria-selected="false">Sat</button>
<button class="scheduler-tab" data-day="sun" role="tab" aria-selected="false">Sun</button>
</div>
<div class="scheduler-timeline" id="schedulerTimeline" role="list" aria-label="Scheduled posts">
<!-- Populated by JavaScript -->
</div>
<div class="scheduler-actions">
<button class="btn btn-primary" id="showSchedulerForm">+ Create Post</button>
<button class="btn btn-outline-light" id="refreshScheduler">Refresh Queue</button>
</div>
<div class="scheduler-form" id="schedulerForm" role="form" aria-label="Create a new scheduled post">
<label for="postContent">Post Content</label>
<textarea id="postContent" placeholder="What's on your mind? Use #hashtags to boost reach..." maxlength="280"></textarea>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div>
<label for="postTime">Time</label>
<input type="time" id="postTime" value="09:00">
</div>
<div>
<label for="postPlatform">Platform</label>
<select id="postPlatform">
<option value="Nexus">Nexus</option>
<option value="Cross-post">Cross-post</option>
<option value="Stories">Stories</option>
</select>
</div>
</div>
<div style="display:flex;gap:12px;margin-top:8px;">
<button class="btn btn-primary btn-sm" id="submitScheduledPost">Schedule Post</button>
<button class="btn btn-outline-light btn-sm" id="cancelSchedulerForm">Cancel</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ TESTIMONIALS ============ -->
<section class="section" id="testimonials" role="region" aria-label="Testimonials">
<div class="container">
<div class="section-header">
<span class="section-tag">💬 Testimonials</span>
<h2>What Our Community Says</h2>
<p>Real stories from real users who've found their voice, their people, and their purpose on Nexus.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-quote">"Nexus completely changed how I approach content creation. The community is incredibly supportive, and the reach I've gained here is unmatched. I went from 200 followers to 50K in six months — all because of the genuine connections I've made."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=nexus-testimonial-1" alt="Avatar of Sarah Kim" loading="lazy">
<div>
<div class="ta-name">Sarah Kim</div>
<div class="ta-role">Lifestyle Creator · 52K followers</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-quote">"I've tried every social platform out there, but Nexus is the only one where I feel like my voice actually matters. The algorithm rewards authenticity, not just frequency. My engagement rate has tripled since I made the switch."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=nexus-testimonial-2" alt="Avatar of David Okafor" loading="lazy">
<div>
<div class="ta-name">David Okafor</div>
<div class="ta-role">Tech Reviewer · 38K followers</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-quote">"The community features on Nexus are second to none. I found my photography collective here, and we've grown from 5 members to over 2,000. This platform doesn't just connect you with people — it connects you with your people."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=nexus-testimonial-3" alt="Avatar of Priya Sharma" loading="lazy">
<div>
<div class="ta-name">Priya Sharma</div>
<div class="ta-role">Photographer & Community Leader</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="section section-alt" id="help" role="region" aria-label="Frequently asked questions">
<div class="container">
<div class="section-header">
<span class="section-tag">❓ FAQ</span>
<h2>Frequently Asked Questions</h2>
<p>Everything you need to know about getting the most out of your Nexus experience.</p>
</div>
<div class="faq-list" id="faqList">
<div class="faq-item">
<div class="faq-question" role="button" tabindex="0" aria-expanded="false">
How does the Nexus algorithm determine what I see?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
<p>Our algorithm prioritizes genuine engagement over vanity metrics. We look at how long you spend with content, the quality of your interactions, and your relationship with the creator. Unlike other platforms, we don't just show you what's popular — we show you what's meaningful to you. Your feed is built around your interests, your communities, and the people you actually engage with.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" tabindex="0" aria-expanded="false">
How can I grow my reach and get more followers?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
<p>Consistency and authenticity are key. Post regularly using relevant hashtags, engage genuinely with your community, and participate in trending conversations. Our data shows that creators who post 3-5 times per week and spend 15+ minutes daily engaging with others see 4x faster growth. Use the content scheduler to maintain a consistent posting cadence without burnout.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" tabindex="0" aria-expanded="false">
What are the community guidelines for posting?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
<p>We believe in fostering a safe, respectful, and inclusive environment. All posts must comply with our community standards, which prohibit hate speech, harassment, misinformation, and explicit content. We use a combination of AI moderation and human review to keep Nexus a positive space. Violations may result in content removal or account suspension depending on severity.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" tabindex="0" aria-expanded="false">
Can I schedule posts in advance on Nexus?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
<p>Absolutely! Our built-in content scheduler lets you plan posts up to 30 days in advance. You can schedule across multiple platforms, set optimal posting times based on your audience's activity, and manage your entire content calendar from one dashboard. The scheduler above is fully functional — try it out and see how easy it is to stay consistent.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" tabindex="0" aria-expanded="false">
How do I report inappropriate content or behavior?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
<p>You can report any post, comment, or user by clicking the three-dot menu and selecting "Report." Our moderation team reviews all reports within 24 hours. For urgent matters, you can also contact our support team directly through the Help Center. We take every report seriously and are committed to keeping Nexus a safe space for everyone.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer class="site-footer" id="settings" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo-group">
<div class="logo-placeholder" aria-hidden="true">N</div>
<div class="logo-text">
<span class="logo-name">Nexus</span>
<span class="logo-tagline">Where Conversations Come Alive</span>
</div>
</div>
<p>Nexus is a social networking platform built for creators, communities, and meaningful connections. Join millions of people sharing their stories, discovering new perspectives, and building communities that matter.</p>
<div class="footer-social">
<a href="#" aria-label="Follow us on Twitter" title="Twitter">𝕏</a>
<a href="#" aria-label="Follow us on Instagram" title="Instagram">📷</a>
<a href="#" aria-label="Follow us on YouTube" title="YouTube">▶</a>
<a href="#" aria-label="Follow us on LinkedIn" title="LinkedIn">💼</a>
<a href="#" aria-label="Follow us on TikTok" title="TikTok">🎵</a>
</div>
</div>
<div class="footer-col">
<h4>Platform</h4>
<ul>
<li><a href="#trending">Explore</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#communities">Communities</a></li>
<li><a href="#scheduler">Content Scheduler</a></li>
<li><a href="#featured">Featured Posts</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Support</h4>
<ul>
<li><a href="#help">Help Center</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Report an Issue</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="#">About Nexus</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press & Media</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Nexus Social Technologies, Inc. All rights reserved.</span>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
<a href="#">Data Protection</a>
</div>
</div>
</div>
</footer>
<!-- ============ TOAST NOTIFICATION ============ -->
<div class="toast" id="toast" role="alert" aria-live="polite"></div>
<!-- ============ JAVASCRIPT ============ -->
<script>
(function() {
'use strict';
// ===== Sticky Header Shadow =====
const header = document.getElementById('siteHeader');
window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// ===== Mobile Menu Toggle =====
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mainNav = document.getElementById('mainNav');
mobileMenuToggle.addEventListener('click', function() {
const isOpen = mainNav.classList.toggle('open');
mobileMenuToggle.setAttribute('aria-expanded', isOpen);
});
// Close mobile menu when a link is clicked
mainNav.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function() {
mainNav.classList.remove('open');
mobileMenuToggle.setAttribute('aria-expanded', 'false');
});
});
// ===== FAQ Accordion =====
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(function(item) {
const question = item.querySelector('.faq-question');
question.addEventListener('click', function() {
const isActive = item.classList.contains('active');
// Close all items
faqItems.forEach(function(otherItem) {
otherItem.classList.remove('active');
otherItem.querySelector('.faq-question').setAttribute('aria-expanded',
'false');
});
// Toggle current item
if (!isActive) {
item.classList.add('active');
question.setAttribute('aria-expanded', 'true');
}
});
// Keyboard support
question.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
question.click();
}
});
});
// ===== Content Scheduler =====
const schedulerData = {
mon: [
{ time: '08:30', content: 'Good morning, Nexus! ☀️ Starting the week with a fresh perspective. What are you working on today? #MondayMotivation #CreatorLife',
platform: 'Nexus', status: 'scheduled' },
{ time: '12:00', content: 'Lunch break Q&A! Drop your questions below and I\'ll answer as many as I can. #AskMeAnything #CommunityFirst',
platform: 'Cross-post', status: 'scheduled' },
{ time: '18:30', content: 'New video is LIVE! 🎬 I spent 3 weeks working on this one — would love to hear your thoughts. Link in bio. #ContentCreator #NewVideo',
platform: 'Nexus', status: 'scheduled' },
],
tue: [
{ time: '09:00', content: 'Tuesday tip: Consistency beats intensity. Show up every day, even when it\'s hard. #CreatorTips #GrowthMindset',
platform: 'Nexus', status: 'scheduled' },
{ time: '15:00', content: 'Behind the scenes from today\'s shoot! 📸 The setup took 4 hours but the results were worth it. #BTS #PhotographyLife',
platform: 'Stories', status: 'scheduled' },
],
wed: [
{ time: '07:45', content: 'Midweek check-in! How is everyone doing? Remember to take breaks and hydrate. 💧 #WellnessWednesday #SelfCare',
platform: 'Nexus', status: 'scheduled' },
{ time: '13:30', content: 'Collaboration announcement! 🎉 I\'m teaming up with @maya_creates for an exciting new series. Stay tuned! #Collab #CreatorsUnite',
platform: 'Cross-post', status: 'scheduled' },
{ time: '19:00', content: 'Live stream tonight at 8 PM! We\'ll be discussing the future of content creation. Set your reminders! #LiveStream #NexusLive',
platform: 'Nexus', status: 'scheduled' },
],
thu: [
{ time: '10:00', content: 'Throwback to where it all started. 🥹 From 0 to 50K — thank you for being part of this journey. #ThrowbackThursday #Grateful',
platform: 'Nexus', status: 'scheduled' },
{ time: '16:30', content: 'Quick poll: What type of content do you want to see more of? A) Tutorials B) Vlogs C) Behind-the-scenes D) All of the above',
platform: 'Nexus', status: 'scheduled' },
],
fri: [
{ time: '08:00', content: 'Friday feels! 🎉 What\'s everyone\'s weekend plans? Share below and let\'s inspire each other. #FridayVibes #WeekendReady',
platform: 'Nexus', status: 'scheduled' },
{ time: '14:00', content: 'New blog post is up! I break down my entire content strategy for 2025. Link in bio. #ContentStrategy #CreatorEconomy',
platform: 'Cross-post', status: 'scheduled' },
{ time: '20:00', content: 'Weekend challenge: Post one thing that made you smile today. Use #NexusSmileChallenge and tag 3 friends! 😊',
platform: 'Nexus', status: 'scheduled' },
],
sat: [
{ time: '11:00', content: 'Saturday morning coffee chat ☕ What\'s on your mind? Let\'s have a real conversation in the comments. #SaturdayChat #Community',
platform: 'Nexus', status: 'scheduled' },
{ time: '17:00', content: 'Weekend photo dump! 📸 Some of my favorite moments from this week. Swipe through and let me know your favorite! #PhotoDump #WeekendVibes',
platform: 'Nexus', status: 'scheduled' },
],
sun: [
{ time: '09:30', content: 'Sunday reset: Planning my week, setting intentions, and getting organized. What\'s your Sunday routine? #SundayReset #Planning',
platform: 'Nexus', status: 'scheduled' },
{ time: '18:00', content: 'Weekly recap! Here\'s what happened this week and what\'s coming next. Thank you for being here. ❤️ #WeeklyRecap #Gratitude',
platform: 'Nexus', status: 'scheduled' },
],
};
let currentDay = 'mon';
const schedulerTabs = document.querySelectorAll('.scheduler-tab');
const schedulerTimeline = document.getElementById('schedulerTimeline');
const schedulerForm = document.getElementById('schedulerForm');
const showSchedulerFormBtn = document.getElementById('showSchedulerForm');
const cancelSchedulerFormBtn = document.getElementById('cancelSchedulerForm');
const submitScheduledPostBtn = document.getElementById('submitScheduledPost');
const refreshSchedulerBtn = document.getElementById('refreshScheduler');
const postContentInput = document.getElementById('postContent');
const postTimeInput = document.getElementById('postTime');
const postPlatformInput = document.getElementById('postPlatform');
const toast = document.getElementById('toast');
function renderSchedulerTimeline(day) {
const posts = schedulerData[day] || [];
schedulerTimeline.innerHTML = '';
if (posts.length === 0) {
schedulerTimeline.innerHTML =
'<p style="color:rgba(255,255,255,0.5);text-align:center;padding:20px;">No scheduled posts for this day. Click "Create Post" to add one!</p>';
return;
}
posts.forEach(function(post, index) {
const postEl = document.createElement('div');
postEl.className = 'scheduled-post';
postEl.setAttribute('role', 'listitem');
postEl.setAttribute('tabindex', '0');
postEl.setAttribute('data-index', index);
const statusClass = post.status === 'published' ? 'status-published' : post.status ===
'draft' ? 'status-draft' : 'status-scheduled';
postEl.innerHTML = `
<span class="scheduled-post-time">${post.time}</span>
<div class="scheduled-post-content">
<span class="sp-text">${post.content}</span>
</div>
<span class="scheduled-post-platform">${post.platform}</span>
<span class="scheduled-post-status ${statusClass}" title="${post.status}"></span>
`;
postEl.addEventListener('click', function() {
postEl.classList.toggle('expanded');
});
postEl.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
postEl.classList.toggle('expanded');
}
});
schedulerTimeline.appendChild(postEl);
});
}
function switchDay(day) {
currentDay = day;
schedulerTabs.forEach(function(tab) {
if (tab.getAttribute('data-day') === day) {
tab.classList.add('active');
tab.setAttribute('aria-selected', 'true');
} else {
tab.classList.remove('active');
tab.setAttribute('aria-selected', 'false');
}
});
renderSchedulerTimeline(day);
}
schedulerTabs.forEach(function(tab) {
tab.addEventListener('click', function() {
switchDay(tab.getAttribute('data-day'));
});
});
showSchedulerFormBtn.addEventListener('click', function() {
schedulerForm.classList.toggle('visible');
if (schedulerForm.classList.contains('visible')) {
postContentInput.focus();
}
});
cancelSchedulerFormBtn.addEventListener('click', function() {
schedulerForm.classList.remove('visible');
postContentInput.value = '';
postTimeInput.value = '09:00';
postPlatformInput.value = 'Nexus';
});
function showToast(message) {
toast.textContent = message;
toast.classList.add('visible');
setTimeout(function() {
toast.classList.remove('visible');
}, 3000);
}
submitScheduledPostBtn.addEventListener('click', function() {
const content = postContentInput.value.trim();
const time = postTimeInput.value || '09:00';
const platform = postPlatformInput.value || 'Nexus';
if (!content) {
showToast('⚠️ Please enter some content for your post.');
return;
}
if (!schedulerData[currentDay]) {
schedulerData[currentDay] = [];
}
schedulerData[currentDay].push({
time: time,
content: content,
platform: platform,
status: 'scheduled',
});
// Sort by time
schedulerData[currentDay].sort(function(a, b) {
return a.time.localeCompare(b.time);
});
renderSchedulerTimeline(currentDay);
schedulerForm.classList.remove('visible');
postContentInput.value = '';
postTimeInput.value = '09:00';
postPlatformInput.value = 'Nexus';
showToast('✅ Post scheduled successfully for ' + currentDay.toUpperCase() + ' at ' + time +
'!');
});
refreshSchedulerBtn.addEventListener('click', function() {
renderSchedulerTimeline(currentDay);
showToast('🔄 Scheduler queue refreshed.');
});
// Initialize scheduler
renderSchedulerTimeline('mon');
// ===== Smooth scroll for anchor links =====
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId && targetId.length > 1) {
const targetEl = document.querySelector(targetId);
if (targetEl) {
e.preventDefault();
const headerOffset = 80;
const elementPosition = targetEl.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset -
headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
});
}
}
});
});
// ===== Intersection Observer for subtle fade-in animations =====
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px',
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Apply initial hidden state and observe section content
document.querySelectorAll(
'.trending-card, .post-card, .event-card, .testimonial-card, .group-card, .sponsored-card'
).forEach(function(el) {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// ===== Keyboard shortcut: Press "N" to focus on Create Post =====
document.addEventListener('keydown', function(e) {
if (e.key === 'n' && !e.ctrlKey && !e.metaKey && !e.altKey) {
const activeEl = document.activeElement;
const isTyping = activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName ===
'TEXTAREA' || activeEl.tagName === 'SELECT');
if (!isTyping) {
e.preventDefault();
const schedulerSection = document.getElementById('scheduler');
if (schedulerSection) {
schedulerSection.scrollIntoView({ behavior: 'smooth' });
setTimeout(function() {
if (!schedulerForm.classList.contains('visible')) {
schedulerForm.classList.add('visible');
postContentInput.focus();
}
}, 500);
}
}
}
});
console.log('%c Nexus — Where Conversations Come Alive ',
'background:#6C3BF4;color:#fff;font-size:16px;font-weight:bold;padding:8px 16px;border-radius:4px;'
);
console.log('%c 🚀 Content scheduler is fully interactive. Try scheduling a post! ',
'color:#6C3BF4;font-size:13px;');
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:46:30.487Z",
"url": "https://benchmark.aimac.invalid/08d777614499dc557a5bbcc5ca88d56e5699e93b52a0566d6152ae009b8d51e9.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" role=\"navigation\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"faq-question\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\">\n How does the Nexus algorithm determine what I see?\n <span class=\"faq-icon\">+</span>\n </div>",
"target": [
".faq-item:nth-child(1) > .faq-question[role=\"button\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" role=\"navigation\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<header class=\"site-header\" id=\"siteHeader\" role=\"banner\">",
"target": [
"#siteHeader"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"logo-placeholder\" aria-hidden=\"true\">N</div>",
"target": [
".header-inner > .logo-group > .logo-placeholder[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" role=\"navigation\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<header class=\"site-header\" id=\"siteHeader\" role=\"banner\">",
"target": [
"#siteHeader"
]
}
]
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"scheduler-tabs\" id=\"schedulerTabs\" role=\"tablist\" aria-label=\"Days of the week\">",
"target": [
"#schedulerTabs"
]
}
]
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"scheduler-tab active\" data-day=\"mon\" role=\"tab\" aria-selected=\"true\">Mon</button>",
"target": [
"button[data-day=\"mon\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<header class=\"site-header\" id=\"siteHeader\" role=\"banner\">",
"target": [
"#siteHeader"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" role=\"navigation\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" role=\"navigation\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"scheduler-tab active\" data-day=\"mon\" role=\"tab\" aria-selected=\"true\">Mon</button>",
"target": [
"button[data-day=\"mon\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Connect. Share.<br><span class=\"gradient-text\">Go Viral.</span></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Viral Moments & Hot Hashtags</h2>",
"target": [
"#trending > .container > .section-header > h2"
]
},
{
"html": "<h3>#GoldenHourChallenge</h3>",
"target": [
".trending-card:nth-child(1) > .trending-card-body > h3"
]
},
{
"html": "<h3>#CommunityOverCompetition</h3>",
"target": [
".trending-card:nth-child(2) > .trending-card-body > h3"
]
},
{
"html": "<h3>#CreatorConfessions</h3>",
"target": [
".trending-card:nth-child(3) > .trending-card-body > h3"
]
},
{
"html": "<h2>What the Community Is Loving</h2>",
"target": [
"#featured > .container > .section-header > h2"
]
},
{
"html": "<h2>Recommended Communities & Groups</h2>",
"target": [
"#communities > .container > .section-header > h2"
]
},
{
"html": "<h4>Street Photography Collective</h4>",
"target": [
".group-card:nth-child(1) > .group-info > h4"
]
},
{
"html": "<h4>Digital Artists Unite</h4>",
"target": [
".group-card:nth-child(2) > .group-info > h4"
]
},
{
"html": "<h4>Sustainable Living Hub</h4>",
"target": [
".group-card:nth-child(3) > .group-info > h4"
]
},
{
"html": "<h4>Indie Music Discovery</h4>",
"target": [
".group-card:nth-child(4) > .group-info > h4"
]
},
{
"html": "<h3>Nexus Pro for Creators</h3>",
"target": [
".sponsored-card > h3"
]
},
{
"html": "<h2>Upcoming Community Events</h2>",
"target": [
"#events > .container > .section-header > h2"
]
},
{
"html": "<h3>Nexus Creator Summit 2025</h3>",
"target": [
".event-card:nth-child(1) > .event-card-body > h3"
]
},
{
"html": "<h3>Community Meetup: Austin</h3>",
"target": [
".event-card:nth-child(2) > .event-card-body > h3"
]
},
{
"html": "<h3>Live Q&A: Growing Your Reach</h3>",
"target": [
".event-card:nth-child(3) > .event-card-body > h3"
]
},
{
"html": "<h2>Plan Your Posts. Perfect Your Timing.</h2>",
"target": [
"#scheduler > .container > .section-header > h2"
]
},
{
"html": "<h2>What Our Community Says</h2>",
"target": [
"#testimonials > .container > .section-header > h2"
]
},
{
"html": "<h2>Frequently Asked Questions</h2>",
"target": [
"#help > .container > .section-header > h2"
]
},
{
"html": "<h4>Platform</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Support</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1a1a2e",
"bgColor": "#fefeff",
"contrastRatio": 16.92,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 16.92"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"logo-name\">Nexus</span>",
"target": [
".header-inner > .logo-group > .logo-text > .logo-name"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "postContent",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<textarea id=\"postContent\" placeholder=\"What's on your mind? Use #hashtags to boost reach...\" maxlength=\"280\"></textarea>",
"target": [
"#postContent"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://picsum.photos/800/600?grayscale&blur=1\" alt=\"A vibrant community of people connecting and sharing moments on Nexus\" loading=\"eager\">",
"target": [
"img[loading=\"eager\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
".footer-col:nth-child(2) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#trending\">Explore</a></li>",
"target": [
".footer-col:nth-child(2) > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://picsum.photos/800/600?grayscale&blur=1\" alt=\"A vibrant community of people connecting and sharing moments on Nexus\" loading=\"eager\">",
"target": [
"img[loading=\"eager\"]"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 73,
"height": 40.5
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (73px by 40.5px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "15.0pt (20px)",
"fontWeight": "bold",
"messageKey": "shortTextContent",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"logo-placeholder\" aria-hidden=\"true\">N</div>",
"target": [
".header-inner > .logo-group > .logo-placeholder[aria-hidden=\"true\"]"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"logo-placeholder\" aria-hidden=\"true\">N</div>",
"target": [
".header-inner > .logo-group > .logo-placeholder[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff6b6b",
"contrastRatio": 2.77,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"trending-badge\">#1 Trending</span>",
"target": [
".trending-card:nth-child(1) > .trending-card-image > .trending-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"trending-badge\">#1 Trending</span>",
"target": [
".trending-card:nth-child(1) > .trending-card-image > .trending-badge"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff6b6b",
"contrastRatio": 2.77,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"trending-badge\">\ud83d\udd25 Rising Fast</span>",
"target": [
".trending-card:nth-child(2) > .trending-card-image > .trending-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"trending-badge\">\ud83d\udd25 Rising Fast</span>",
"target": [
".trending-card:nth-child(2) > .trending-card-image > .trending-badge"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff6b6b",
"contrastRatio": 2.77,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"trending-badge\">\u26a1 Live Now</span>",
"target": [
".trending-card:nth-child(3) > .trending-card-image > .trending-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"trending-badge\">\u26a1 Live Now</span>",
"target": [
".trending-card:nth-child(3) > .trending-card-image > .trending-badge"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.77 (foreground color: #ffffff, background color: #ff6b6b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6773
},
{
"y": 576,
"height": 6773
},
{
"y": 1152,
"height": 6773
},
{
"y": 1728,
"height": 6773
},
{
"y": 2304,
"height": 6773
},
{
"y": 2880,
"height": 6773
},
{
"y": 3456,
"height": 6773
},
{
"y": 4032,
"height": 6773
},
{
"y": 4608,
"height": 6773
},
{
"y": 5184,
"height": 6773
},
{
"y": 5760,
"height": 6773
},
{
"y": 6053,
"height": 6773
}
],
"scans": 13,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Social Media" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Social Media"
- Description: Platforms for social networking, sharing, messaging, and online communities.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Social Media" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Events", "Settings", "Help".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Social Media" category. Consider themes similar to: "Event Highlights", "Viral Moments", "Featured Posts".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "hashtag", "reach", "trending".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Create Post", "Explore", "React".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "content scheduler".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "sponsored content", "group recommendations", "event invites".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.