initial commit
This commit is contained in:
+362
@@ -0,0 +1,362 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="midnight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>UI Kit Demo — Layout C</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=Syne:wght@400;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
<link rel="stylesheet" href="themes/theme-midnight.css" />
|
||||
<link rel="stylesheet" href="themes/theme-linen.css" />
|
||||
<link rel="stylesheet" href="themes/theme-neon.css" />
|
||||
<link rel="stylesheet" href="themes/theme-petal.css" />
|
||||
<link rel="stylesheet" href="components/header/header-c.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero-c.css" />
|
||||
<link rel="stylesheet" href="components/features/features-c.css" />
|
||||
<link rel="stylesheet" href="components/about/about-c.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials-c.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq-c.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta-c.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact-c.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer-c.css" />
|
||||
<style>
|
||||
.switcher-panel{position:fixed;bottom:2rem;right:2rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:1.25rem}
|
||||
.switcher-group{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
|
||||
.switcher-group-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
|
||||
.switcher-pill{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:99px;border:1.5px solid var(--color-border);background-color:var(--color-surface);cursor:pointer;font-size:.8rem;font-weight:600;color:var(--color-text);font-family:var(--font-body);transition:all .2s ease;box-shadow:var(--color-card-shadow);white-space:nowrap}
|
||||
.switcher-pill:hover,.switcher-pill.active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-soft)}
|
||||
.switcher-pill.active{pointer-events:none}
|
||||
.theme-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
|
||||
.layout-letter{width:16px;height:16px;border-radius:3px;background-color:var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:var(--color-text-muted);flex-shrink:0;transition:all .2s ease}
|
||||
.switcher-pill.active .layout-letter,.switcher-pill:hover .layout-letter{background-color:var(--color-primary);color:var(--color-btn-text)}
|
||||
.theme-pill[data-t="midnight"] .theme-dot{background:#00d4ff}
|
||||
.theme-pill[data-t="linen"] .theme-dot{background:#c2410c}
|
||||
.theme-pill[data-t="neon"] .theme-dot{background:#aaff00}
|
||||
.theme-pill[data-t="petal"] .theme-dot{background:linear-gradient(135deg,#9b5de5,#f72585)}
|
||||
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
||||
.hero-c-content>*{opacity:0;animation:fade-up .6s ease forwards}
|
||||
.hero-c-content>*:nth-child(1){animation-delay:.1s}.hero-c-content>*:nth-child(2){animation-delay:.2s}
|
||||
.hero-c-content>*:nth-child(3){animation-delay:.3s}.hero-c-content>*:nth-child(4){animation-delay:.4s}
|
||||
.hero-c-content>*:nth-child(5){animation-delay:.5s}
|
||||
.hero-c-visual{opacity:0;animation:fade-up .7s ease .3s forwards}
|
||||
</style>
|
||||
<script src="layout.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER C -->
|
||||
<header class="header-c">
|
||||
<div class="container">
|
||||
<div class="header-c-inner">
|
||||
<a href="#" class="header-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<div class="header-c-right">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
<button class="header-c-menu-btn" id="headerCMenuBtn">
|
||||
<svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-c-drawer" id="headerCDrawer">
|
||||
<div class="container">
|
||||
<div class="header-c-drawer-inner">
|
||||
<a href="#features" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Features</span><span class="header-c-drawer-link-desc">Lorem ipsum dolor sit amet consectetur.</span></a>
|
||||
<a href="#about" class="header-c-drawer-link"><span class="header-c-drawer-link-title">About</span><span class="header-c-drawer-link-desc">Adipiscing elit sed do eiusmod tempor.</span></a>
|
||||
<a href="#testimonials" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Testimonials</span><span class="header-c-drawer-link-desc">Incididunt ut labore et dolore magna.</span></a>
|
||||
<a href="#contact" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Contact</span><span class="header-c-drawer-link-desc">Quis nostrud exercitation ullamco.</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<hr class="divider" />
|
||||
|
||||
<!-- HERO C -->
|
||||
<section class="hero-c">
|
||||
<div class="container">
|
||||
<div class="hero-c-inner">
|
||||
<div class="hero-c-content">
|
||||
<div class="hero-c-eyebrow"><span class="hero-c-eyebrow-line"></span><span class="hero-c-eyebrow-text">Now in public beta</span></div>
|
||||
<h1 class="hero-c-title">Your headline<br />goes <em>right here</em><br />asymmetric</h1>
|
||||
<p class="hero-c-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.</p>
|
||||
<div class="hero-c-features">
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature one — lorem ipsum dolor sit amet</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature two — consectetur adipiscing elit</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature three — sed do eiusmod tempor</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature four — incididunt ut labore et dolore</div>
|
||||
</div>
|
||||
<div class="hero-c-actions">
|
||||
<a href="#" class="btn btn-primary">Primary action <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-c-visual">
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">🚀</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">Deployment successful</div><div class="hero-c-notif-text">Lorem ipsum dolor sit amet consectetur.</div></div><span class="hero-c-notif-time">2m ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">📈</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">Traffic up 34% this week</div><div class="hero-c-notif-text">Adipiscing elit sed do eiusmod tempor.</div></div><span class="hero-c-notif-time">1h ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">✅</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">All systems operational</div><div class="hero-c-notif-text">Incididunt ut labore et dolore magna.</div></div><span class="hero-c-notif-time">3h ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">👥</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">2,400 users onboarded</div><div class="hero-c-notif-text">Quis nostrud exercitation ullamco.</div></div><span class="hero-c-notif-time">Yesterday</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES C -->
|
||||
<section class="features-c" id="features">
|
||||
<div class="container">
|
||||
<div class="features-c-header">
|
||||
<div><span class="section-label">Features</span><h2 class="section-title">Everything you need<br />to build great products</h2></div>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="features-c-list">
|
||||
<div class="features-c-item"><span class="features-c-number">01</span><div class="features-c-content"><h3 class="features-c-title">Feature Title One</h3><p class="features-c-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">02</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Two</h3><p class="features-c-desc">Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit voluptate velit.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">03</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Three</h3><p class="features-c-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">04</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Four</h3><p class="features-c-desc">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipiscing.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">05</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Five</h3><p class="features-c-desc">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">06</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Six</h3><p class="features-c-desc">Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim est laborum.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT C -->
|
||||
<section class="about-c" id="about">
|
||||
<div class="container">
|
||||
<div class="about-c-inner">
|
||||
<div class="about-c-visual">
|
||||
<div class="about-c-img-placeholder">
|
||||
<span class="about-c-img-label">Image placeholder<br />4:5 ratio</span>
|
||||
</div>
|
||||
<div class="about-c-img-card"><span class="about-c-img-card-num">28</span>Team members</div>
|
||||
</div>
|
||||
<div class="about-c-content">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-c-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
|
||||
<p class="about-c-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa officia deserunt mollit.</p>
|
||||
<div class="about-c-stats">
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">8+</div><div class="about-c-stat-label">Years active</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">120k</div><div class="about-c-stat-label">Users worldwide</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">340+</div><div class="about-c-stat-label">Components</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">99%</div><div class="about-c-stat-label">Satisfaction</div></div>
|
||||
</div>
|
||||
<div class="about-c-tags">
|
||||
<span class="about-c-tag">Design Systems</span><span class="about-c-tag">Open Source</span>
|
||||
<span class="about-c-tag">Developer Tools</span><span class="about-c-tag">UI Components</span>
|
||||
<span class="about-c-tag">Accessibility</span>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS C -->
|
||||
<section class="testimonials-c" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-c-header">
|
||||
<div><span class="section-label">Testimonials</span><h2 class="section-title">What our users are saying</h2></div>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="testimonials-c-list">
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">01</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">AJ</div><span class="testimonials-c-name">Alex Johnson</span><span class="testimonials-c-role">Product Designer, Acme Co.</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Acme Co.</span>
|
||||
</div>
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">02</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">BK</div><span class="testimonials-c-name">Blake Kim</span><span class="testimonials-c-role">Engineering Lead, Startup Inc.</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Startup Inc.</span>
|
||||
</div>
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">03</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">CL</div><span class="testimonials-c-name">Casey Lee</span><span class="testimonials-c-role">Founder, Lorem Studio</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Lorem Studio</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ C -->
|
||||
<section class="faq-c" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-c-header">
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2 class="section-title">Frequently asked questions</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
|
||||
<p class="faq-c-contact-nudge">Still have questions? <a href="#contact">Get in touch</a> and we'll respond within 24 hours.</p>
|
||||
</div>
|
||||
<div class="faq-c-grid">
|
||||
<div class="faq-c-col">
|
||||
<div class="faq-c-item is-open">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">What is this product and who is it for?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation laboris.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">How do I get started after signing up?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Is there a free plan available?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipiscing elit.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-c-col">
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Can I cancel my subscription at any time?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit voluptate.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Do you offer support for enterprise teams?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">How is my data stored and kept secure?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT C -->
|
||||
<section class="contact-c" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-c-inner">
|
||||
<div class="contact-c-info">
|
||||
<span class="section-label">Contact Us</span>
|
||||
<h2 class="section-title">Get in touch with our team</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<div class="contact-c-details">
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><div><div class="contact-c-detail-label">Email</div><div class="contact-c-detail-value">hello@example.com</div></div></div>
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.88a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg></div><div><div class="contact-c-detail-label">Phone</div><div class="contact-c-detail-value">+1 (555) 000-0000</div></div></div>
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div><div><div class="contact-c-detail-label">Office</div><div class="contact-c-detail-value">123 Example Street, City</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-c-form-wrap">
|
||||
<form id="contactFormC">
|
||||
<div class="contact-c-form-grid">
|
||||
<div class="contact-c-form-group"><label class="contact-c-label">First name <span>*</span></label><input type="text" class="contact-c-input" placeholder="John" required /></div>
|
||||
<div class="contact-c-form-group"><label class="contact-c-label">Last name <span>*</span></label><input type="text" class="contact-c-input" placeholder="Doe" required /></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Email address <span>*</span></label><input type="email" class="contact-c-input" placeholder="john@example.com" required /></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Subject</label><div class="contact-c-select-wrap"><select class="contact-c-input contact-c-select"><option value="">Select a topic</option><option>General enquiry</option><option>Sales</option><option>Support</option><option>Partnership</option></select></div></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Message <span>*</span></label><textarea class="contact-c-textarea" placeholder="Lorem ipsum dolor sit amet..." required></textarea></div>
|
||||
</div>
|
||||
<div class="contact-c-submit-row">
|
||||
<button type="submit" class="btn btn-primary">Send message <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="contact-c-success" id="formSuccessC">
|
||||
<div class="contact-c-success-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div class="contact-c-success-title">Message sent!</div>
|
||||
<p class="contact-c-success-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-c-accent">
|
||||
<div class="contact-c-accent-title">Why reach out to us?</div>
|
||||
<div class="contact-c-accent-list">
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Lorem ipsum dolor sit amet consectetur.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Adipiscing elit sed do eiusmod tempor.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Incididunt ut labore et dolore magna.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Quis nostrud exercitation ullamco nisi.</div>
|
||||
</div>
|
||||
<div class="contact-c-accent-divider"></div>
|
||||
<div class="contact-c-accent-response"><strong>Response time</strong>We typically reply within 24 hours on business days.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA C -->
|
||||
<section class="cta-c">
|
||||
<div class="container">
|
||||
<div class="cta-c-inner">
|
||||
<span class="cta-c-label"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>Get started today</span>
|
||||
<h2 class="cta-c-title">Ready to get<br />started right now?</h2>
|
||||
<p class="cta-c-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.</p>
|
||||
<div class="cta-c-actions">
|
||||
<a href="#" class="btn-solid">Primary action <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
<a href="#" class="btn-ghost">Secondary action</a>
|
||||
</div>
|
||||
<div class="cta-c-trust">
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Free 14-day trial</span>
|
||||
<span class="cta-c-divider"></span>
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Cancel anytime</span>
|
||||
<span class="cta-c-divider"></span>
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>No credit card needed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER C -->
|
||||
<footer class="footer-c">
|
||||
<div class="container">
|
||||
<div class="footer-c-bar">
|
||||
<a href="#" class="footer-c-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<nav class="footer-c-nav">
|
||||
<a href="#">Features</a><a href="#">Pricing</a><a href="#">About</a>
|
||||
<a href="#">Blog</a><a href="#">Privacy</a><a href="#">Terms</a>
|
||||
</nav>
|
||||
<p class="footer-c-copy">© 2025 UI Kit Demo. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- SWITCHER -->
|
||||
<div class="switcher-panel">
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Layout</span>
|
||||
<button class="switcher-pill layout-pill" data-l="a"><span class="layout-letter">A</span>Split</button>
|
||||
<button class="switcher-pill layout-pill" data-l="b"><span class="layout-letter">B</span>Centered</button>
|
||||
<button class="switcher-pill layout-pill active" data-l="c"><span class="layout-letter">C</span>Asymmetric</button>
|
||||
</div>
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Theme</span>
|
||||
<button class="switcher-pill theme-pill" data-t="midnight"><span class="theme-dot"></span>Midnight</button>
|
||||
<button class="switcher-pill theme-pill" data-t="linen"><span class="theme-dot"></span>Linen</button>
|
||||
<button class="switcher-pill theme-pill" data-t="neon"><span class="theme-dot"></span>Neon</button>
|
||||
<button class="switcher-pill theme-pill" data-t="petal"><span class="theme-dot"></span>Petal</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Header C drawer
|
||||
const menuBtn = document.getElementById('headerCMenuBtn');
|
||||
const drawer = document.getElementById('headerCDrawer');
|
||||
if (menuBtn) { menuBtn.addEventListener('click', () => drawer.classList.toggle('is-open')); }
|
||||
|
||||
// FAQ C accordion (per-column independent)
|
||||
document.querySelectorAll('.faq-c-col').forEach(col => {
|
||||
col.querySelectorAll('.faq-c-question').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const item = btn.closest('.faq-c-item');
|
||||
const isOpen = item.classList.contains('is-open');
|
||||
col.querySelectorAll('.faq-c-item').forEach(i => i.classList.remove('is-open'));
|
||||
if (!isOpen) item.classList.add('is-open');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Contact C form
|
||||
const formC = document.getElementById('contactFormC');
|
||||
const successC = document.getElementById('formSuccessC');
|
||||
if (formC) { formC.addEventListener('submit', e => { e.preventDefault(); formC.style.display='none'; successC.classList.add('is-visible'); }); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user