initial commit
This commit is contained in:
+375
@@ -0,0 +1,375 @@
|
||||
<!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 B</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-b.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero-b.css" />
|
||||
<link rel="stylesheet" href="components/features/features-b.css" />
|
||||
<link rel="stylesheet" href="components/about/about-b.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials-b.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq-b.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta-b.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact-b.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer-b.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-b-inner>*{opacity:0;animation:fade-up .6s ease forwards}
|
||||
.hero-b-inner>*:nth-child(1){animation-delay:.1s}.hero-b-inner>*:nth-child(2){animation-delay:.2s}
|
||||
.hero-b-inner>*:nth-child(3){animation-delay:.3s}.hero-b-inner>*:nth-child(4){animation-delay:.4s}
|
||||
.hero-b-inner>*:nth-child(5){animation-delay:.5s}.hero-b-inner>*:nth-child(6){animation-delay:.6s}
|
||||
</style>
|
||||
<script src="layout.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER B -->
|
||||
<header class="header-b">
|
||||
<div class="container">
|
||||
<div class="header-b-inner">
|
||||
<div class="header-b-top">
|
||||
<a href="#" class="header-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<div class="header-b-cta">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
<nav class="header-b-nav">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<a href="#features">Features</a><a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a><a href="#faq">FAQ</a><a href="#contact">Contact</a>
|
||||
<div class="mobile-menu-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<hr class="divider" />
|
||||
|
||||
<!-- HERO B -->
|
||||
<section class="hero-b">
|
||||
<div class="container">
|
||||
<div class="hero-b-inner">
|
||||
<div class="hero-b-badge"><span class="hero-b-badge-dot"></span>Now in public beta</div>
|
||||
<h1 class="hero-b-title">Your headline<br />goes <em>right here</em><br />centered</h1>
|
||||
<p class="hero-b-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-b-capture">
|
||||
<input class="hero-b-input" type="email" placeholder="Enter your email address" />
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
<p class="hero-b-note">Free 14-day trial · No credit card needed · Cancel anytime</p>
|
||||
<div class="hero-b-stats">
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">98.7%</div><div class="hero-b-stat-label">Uptime</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">12k</div><div class="hero-b-stat-label">Daily users</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">4.2ms</div><div class="hero-b-stat-label">Response time</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">+34%</div><div class="hero-b-stat-label">Growth</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES B -->
|
||||
<section class="features-b" id="features">
|
||||
<div class="container">
|
||||
<div class="features-b-header">
|
||||
<span class="section-label">Features</span>
|
||||
<h2 class="section-title">Everything you need<br />to build great products</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>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-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>
|
||||
<h3 class="features-b-title">Feature Title One</h3>
|
||||
<p class="features-b-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Alpha</strong>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Beta</strong>Sed do eiusmod tempor incididunt ut labore et dolore.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Gamma</strong>Ut enim ad minim veniam quis nostrud exercitation.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
|
||||
<h3 class="features-b-title">Feature Title Two</h3>
|
||||
<p class="features-b-desc">Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor reprehenderit.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Delta</strong>Duis aute irure dolor in reprehenderit in voluptate.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Epsilon</strong>Excepteur sint occaecat cupidatat non proident sunt.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Zeta</strong>In culpa qui officia deserunt mollit anim id est.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-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>
|
||||
<h3 class="features-b-title">Feature Title Three</h3>
|
||||
<p class="features-b-desc">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Eta</strong>Quis nostrud exercitation ullamco laboris nisi aliquip.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Theta</strong>Commodo consequat duis aute irure dolor reprehenderit.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Iota</strong>Voluptate velit esse cillum dolore eu fugiat nulla.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT B -->
|
||||
<section class="about-b" id="about">
|
||||
<div class="container">
|
||||
<div class="about-b-text">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-b-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-b-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 qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="about-b-actions">
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
<a href="#" class="btn btn-outline">Read our story</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-b-stats">
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">8+</div><div class="about-b-stat-label">Years active</div><div class="about-b-stat-desc">Lorem ipsum dolor sit amet.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">120k</div><div class="about-b-stat-label">Users worldwide</div><div class="about-b-stat-desc">Adipiscing elit sed do eiusmod.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">340+</div><div class="about-b-stat-label">Components</div><div class="about-b-stat-desc">Incididunt ut labore et dolore.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">99%</div><div class="about-b-stat-label">Satisfaction</div><div class="about-b-stat-desc">Quis nostrud exercitation.</div></div>
|
||||
</div>
|
||||
<div class="about-b-tags">
|
||||
<span class="about-b-tag">Design Systems</span><span class="about-b-tag">Open Source</span>
|
||||
<span class="about-b-tag">Developer Tools</span><span class="about-b-tag">UI Components</span>
|
||||
<span class="about-b-tag">Accessibility</span>
|
||||
</div>
|
||||
<div class="about-b-team">
|
||||
<div class="about-b-team-avatars"><span>AJ</span><span>BK</span><span>CL</span><span>DM</span><span>+24</span></div>
|
||||
<p class="about-b-team-text"><strong>A team of 28</strong> across 12 countries — remote-first since day one</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS B -->
|
||||
<section class="testimonials-b" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-b-header">
|
||||
<span class="section-label">Testimonials</span>
|
||||
<h2 class="section-title">What our users are saying</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>
|
||||
<div class="testimonials-b-stage">
|
||||
<span class="testimonials-b-quote-mark">"</span>
|
||||
<div class="testimonials-b-slide is-active" data-index="0">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-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 ut aliquip ex ea commodo consequat.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">AJ</div><div><div class="testimonials-b-name">Alex Johnson</div><div class="testimonials-b-role">Product Designer, Acme Co.</div></div></div>
|
||||
</div>
|
||||
<div class="testimonials-b-slide" data-index="1">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-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 mollit anim id est laborum et magna aliqua.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">BK</div><div><div class="testimonials-b-name">Blake Kim</div><div class="testimonials-b-role">Engineering Lead, Startup Inc.</div></div></div>
|
||||
</div>
|
||||
<div class="testimonials-b-slide" data-index="2">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-text">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 esse cillum dolore eu fugiat nulla pariatur et lorem.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">CL</div><div><div class="testimonials-b-name">Casey Lee</div><div class="testimonials-b-role">Founder, Lorem Studio</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonials-b-selectors">
|
||||
<button class="testimonials-b-selector is-active" data-slide="0"><span class="testimonials-b-sel-avatar">AJ</span>Alex Johnson</button>
|
||||
<button class="testimonials-b-selector" data-slide="1"><span class="testimonials-b-sel-avatar">BK</span>Blake Kim</button>
|
||||
<button class="testimonials-b-selector" data-slide="2"><span class="testimonials-b-sel-avatar">CL</span>Casey Lee</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ B -->
|
||||
<section class="faq-b" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-b-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-b-contact-nudge">Still have questions? <a href="#contact">Get in touch</a> and we'll get back to you within 24 hours.</p>
|
||||
</div>
|
||||
<div class="faq-b-list">
|
||||
<div class="faq-b-item is-open">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">What is this product and who is it for?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">How do I get started after signing up?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 qui officia deserunt mollit anim id est laborum.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Is there a free plan available?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 sed do eiusmod tempor incididunt labore et dolore.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Can I cancel my subscription at any time?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Do you offer support for enterprise teams?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 ullamco laboris nisi ut aliquip commodo.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">How is my data stored and kept secure?</span><span class="faq-b-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-b-answer"><div class="faq-b-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 eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT B -->
|
||||
<section class="contact-b" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-b-header">
|
||||
<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>
|
||||
<div class="contact-b-card">
|
||||
<form id="contactFormB">
|
||||
<div class="contact-b-form-grid">
|
||||
<div class="contact-b-form-group"><label class="contact-b-label">First name <span>*</span></label><input type="text" class="contact-b-input" placeholder="John" required /></div>
|
||||
<div class="contact-b-form-group"><label class="contact-b-label">Last name <span>*</span></label><input type="text" class="contact-b-input" placeholder="Doe" required /></div>
|
||||
<div class="contact-b-form-group full-width"><label class="contact-b-label">Email address <span>*</span></label><input type="email" class="contact-b-input" placeholder="john@example.com" required /></div>
|
||||
<div class="contact-b-form-group full-width"><label class="contact-b-label">Subject</label><div class="contact-b-select-wrap"><select class="contact-b-input contact-b-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-b-form-group full-width"><label class="contact-b-label">Message <span>*</span></label><textarea class="contact-b-textarea" placeholder="Lorem ipsum dolor sit amet..." required></textarea></div>
|
||||
</div>
|
||||
<div class="contact-b-submit-row">
|
||||
<p class="contact-b-privacy">By submitting you agree to our <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>.</p>
|
||||
<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-b-success" id="formSuccessB">
|
||||
<div class="contact-b-success-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div class="contact-b-success-title">Message sent!</div>
|
||||
<p class="contact-b-success-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA B -->
|
||||
<section class="cta-b">
|
||||
<div class="container">
|
||||
<div class="cta-b-inner">
|
||||
<div class="cta-b-content">
|
||||
<span class="cta-b-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-b-title">Ready to get<br /><em>started</em> right now?</h2>
|
||||
<p class="cta-b-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim.</p>
|
||||
<div class="cta-b-trust">
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Free 14-day trial</div>
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Cancel anytime</div>
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>No credit card needed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-b-card">
|
||||
<div class="cta-b-card-title">Start your free trial</div>
|
||||
<p class="cta-b-card-sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
|
||||
<div class="cta-b-form">
|
||||
<input type="text" class="cta-b-input" placeholder="Your full name" />
|
||||
<input type="email" class="cta-b-input" placeholder="Your email address" />
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Create free account <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>
|
||||
<p class="cta-b-note">Free 14-day trial · No credit card required</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER B -->
|
||||
<footer class="footer-b">
|
||||
<div class="container">
|
||||
<div class="footer-b-nav">
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Product</h4><ul class="footer-b-links"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li><li><a href="#">Roadmap</a></li><li><a href="#">Status</a></li></ul></div>
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Company</h4><ul class="footer-b-links"><li><a href="#">About</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div>
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Resources</h4><ul class="footer-b-links"><li><a href="#">Documentation</a></li><li><a href="#">API Reference</a></li><li><a href="#">Guides</a></li><li><a href="#">Community</a></li><li><a href="#">Support</a></li></ul></div>
|
||||
</div>
|
||||
<div class="footer-b-bottom">
|
||||
<a href="#" class="footer-b-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<p class="footer-b-tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
|
||||
<div class="footer-b-social">
|
||||
<a href="#" aria-label="Twitter"><svg viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 22.43.36a9 9 0 0 1-2.83 1.08A4.48 4.48 0 0 0 16.11 0c-2.47 0-4.47 2-4.47 4.47 0 .35.04.7.11 1.03A12.69 12.69 0 0 1 1.64.89a4.48 4.48 0 0 0 1.38 5.97A4.41 4.41 0 0 1 1 6.35v.06c0 2.17 1.54 3.97 3.58 4.38a4.51 4.51 0 0 1-2.02.08c.57 1.78 2.22 3.08 4.18 3.12A8.99 8.99 0 0 1 0 15.54 12.67 12.67 0 0 0 6.86 17.5c8.24 0 12.75-6.83 12.75-12.75l-.01-.58A9.07 9.07 0 0 0 22 2l.03.03z"/></svg></a>
|
||||
<a href="#" aria-label="GitHub"><svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
|
||||
<a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
|
||||
</div>
|
||||
<p class="footer-b-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 active" data-l="b"><span class="layout-letter">B</span>Centered</button>
|
||||
<button class="switcher-pill layout-pill" 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>
|
||||
document.querySelectorAll('.testimonials-b-selector').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const idx = btn.dataset.slide;
|
||||
document.querySelectorAll('.testimonials-b-slide').forEach(s => s.classList.remove('is-active'));
|
||||
document.querySelectorAll('.testimonials-b-selector').forEach(b => b.classList.remove('is-active'));
|
||||
document.querySelector('.testimonials-b-slide[data-index="'+idx+'"]').classList.add('is-active');
|
||||
btn.classList.add('is-active');
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('.faq-b-question').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const item = btn.closest('.faq-b-item');
|
||||
const isOpen = item.classList.contains('is-open');
|
||||
document.querySelectorAll('.faq-b-item').forEach(i => i.classList.remove('is-open'));
|
||||
if (!isOpen) item.classList.add('is-open');
|
||||
});
|
||||
});
|
||||
const formB = document.getElementById('contactFormB');
|
||||
const successB = document.getElementById('formSuccessB');
|
||||
if (formB) { formB.addEventListener('submit', e => { e.preventDefault(); formB.style.display='none'; successB.classList.add('is-visible'); }); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user