Skip to content

Instantly share code, notes, and snippets.

@0xbageltoes

0xbageltoes/dkl-tabs-v3.markdown

Created April 27, 2025 04:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 0xbageltoes/80118e856de05b55b0ee1356e07bae33 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 0xbageltoes/80118e856de05b55b0ee1356e07bae33 to your computer and use it in GitHub Desktop.
Download ZIP
dkl-tabs-v3
Raw
index.html
<div class="section"></div>
<div class="section">
<div class="boxed-text lp-vertical-paddings redesign">
<div class="lp-container">
<div class="lp-title-group">
<h2 class="lp-h2 js-title">{{title}}</h2>
</div>
</div>
<div class="tabs-section">
<div class="tabs-container">
<div class="tabs-card">
<div class="tabs-wrapper">
<div class="tabs-list">
<button class="tab-trigger active" data-tab="developers">DEVELOPERS</button>
<button class="tab-trigger" data-tab="individuals">INDIVIDUALS</button>
<button class="tab-trigger" data-tab="institutions">INSTITUTIONS</button>
<button class="tab-trigger" data-tab="international">INTERNATIONAL</button>
</div>
<div class="tabs-content-wrapper">
<!-- Developers Tab Content -->
<div class="tabs-content-underlay"></div>
<div class="tab-content active" id="developers-content">
<div class="tab-content-inner">
<div class="tab-content-left">
<div class="tab-content-description-container">
<h3 class="lp-h3 title tab-content-title">Development Excellence</h3>
<div class="description">
<p>We understand the unique challenges and opportunities in development projects:</p>
<ul>
<li>Robust network of capital providers, contractors, vendors</li>
<li>Complex zoning and approval process experience</li>
<li>Record of delivering target profiles with swift execution</li>
<li>Design consultation focused on out sale maximization</li>
</ul>
</div>
</div>
</div>
<div class="tab-content-right tab-content-image tab-dev"></div>
</div>
</div>
<!-- Individuals Tab Content -->
<div class="tab-content" id="individuals-content">
<div class="tab-content-inner">
<div class="tab-content-left">
<h3 class="lp-h3 title tab-content-title">Your Vision, Our Expertise</h3>
<div class="description">
<p>Flexible approach enabling clients to realize their vision:</p>
<ul>
<li>Access our proprietary inventory and exclusive sourcing network</li>
<li>Property evaluation, terms negotiation, and deal structuring</li>
<li>Design consultation, renovation planning, and artistic advice</li>
<li>Partner network spanning developers, architects, and designers</li>
</ul>
</div>
</div>
<div class="tab-content-right tab-content-image tab-indv"></div>
</div>
</div>
<!-- Institutions Tab Content -->
<div class="tab-content" id="institutions-content">
<div class="tab-content-inner">
<div class="tab-content-left">
<div class="tab-content-description-container">
<h3 class="lp-h3 title tab-content-title">Investment Intelligence</h3>
<div class="description">
<p>Our comprehensive approach helps investors maximize returns:</p>
<ul>
<li>Deal sourcing and first looks</li>
<li>Complex transaction structuring</li>
<li>Value-add opportunity identification</li>
<li>Local market insights and timing guidance</li>
</ul>
</div>
</div>
</div>
<div class="tab-content-right tab-content-image tab-inst"></div>
</div>
</div>
<!-- International Tab Content -->
<div class="tab-content" id="international-content">
<div class="tab-content-inner">
<div class="tab-content-left">
<div class="tab-content-description-container">
<h3 class="lp-h3 title tab-content-title">Investment Intelligence</h3>
<div class="description">
<p>Our comprehensive approach helps investors maximize returns:</p>
<ul>
<li>Deal sourcing and first looks</li>
<li>Complex transaction structuring</li>
<li>Value-add opportunity identification</li>
<li>Local market insights and timing guidance</li>
</ul>
</div>
</div>
</div>
<div class="tab-content-right tab-content-image tab-intl"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section"></div>
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
/* ── limit to the /home-staged-edits page ──────────────────────────── */
const okPage = (
window.location.origin === 'https://dlrealtydesign.com' &&
window.location.pathname.replace(/\/$/,'') === '/home-staged-edits'
);
if (okPage) return;
/* ── DOM references ────────────────────────────────────────────────── */
const triggers = Array.from(document.querySelectorAll('.tab-trigger'));
const contents = Array.from(document.querySelectorAll('.tab-content'));
let current = 0;
const ROTATE_MS = 5000; // <<< 5-second dwell per tab
let timer; // holds setInterval id
/* ── core switch routine ───────────────────────────────────────────── */
function activate(idx, userClick = false){
if (idx === current) return; // ignore repeat clicks
/* remove old state & progress bar */
triggers[current].classList.remove('active','progress');
contents[current].classList.remove('active');
/* set new */
current = idx;
triggers[current].classList.add('active');
/* force reflow so the progress animation can restart */
void triggers[current].offsetWidth;
triggers[current].classList.add('progress');
contents[current].classList.add('active');
/* reset auto-rotate after manual interaction */
if(userClick){
clearInterval(timer);
timer = setInterval(nextTab, ROTATE_MS);
}
}
const nextTab = () => activate((current + 1) % triggers.length);
/* ── click listeners ──────────────────────────────────────────────── */
triggers.forEach((btn, idx) => btn.addEventListener('click', () => activate(idx, true)));
/* ── kick things off ──────────────────────────────────────────────── */
triggers[0].classList.add('progress'); // start initial bar
timer = setInterval(nextTab, ROTATE_MS); // start auto-rotation
});
Raw
style.css
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Geist", Helvetica, sans-serif;
background-color: white;
position: relative;
height: 100%;
margin: 0;
padding: 0px;
background-image: linear-gradient(
90deg,
#ffffff 0%,
#ffffff 50%,
#e2e2e2 calc(50% + 1px),
#ffffff calc(50% + 1px)
);
}
body::after {
content: " ";
position: absolute;
left: 50px;
top: 0;
bottom: 0;
width: 1px;
height: 100%;
background-color: #e2e2e2;
z-index: -1;
}
body::before {
content: " ";
position: absolute;
right: 50px;
top: 0;
bottom: 0;
width: 1px;
height: 100%;
background-color: #e2e2e2;
z-index: -1;
}
@media (max-width: 768px) {
body::before {
right: 25px;
}
body::after {
left: 25px;
}
}
ul {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 0.25rem;
padding-bottom: 0rem;
padding-left: 1.25rem;
}
li {
font-weight: normal;
color: #6e6e6e;
font-size: 1rem;
line-height: 1;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-family: "Geist", Helvetica, sans-serif;
text-wrap: pretty;
}
/* Main section styles */
.section {
background-color: none;
padding: 6rem 0px;
display: flex;
align-items: center;
justify-content: center;
min-width: 100%;
margin: none;
}
.boxed-text, .lp-vertical-paddings, .redesign {
padding: 50px 0px;
min-width: 100%;
width: 100%;
background: none;
}
.boxed-text.lp-vertical-paddings.redesign {
background: radial-gradient(
25% 40% at 50% 45%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.8) 70%,
rgba(255, 255, 255, 0) 100%);
}
.lp-container {
padding: 0px 50px;
background: none;
}
.lp-title-group {
max-width: 1290px;
margin: 0px auto;
background: none;
}
h2::before {
content: "Dynamic Solutions";
}
.title {
font-size: 20px !important;
margin-bottom: 20px !important;
@media (max-width: 768px) {
font-size: 18px !important;
margin-bottom: 18px !important;
}
}
.description {
line-height: 1.5;
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
color: var(--fontColorDKL);
font-size: 16px;
& p {
margin-bottom: 1rem !important;
padding: 0px !important;
color: var(--fontColorDKL);
text-wrap: pretty;
}
& ul {
padding-inline-start: 20px;
margin-inline-start: 0px;
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-bottom: 0px;
line-height: 1;
color: var(--fontColorDKL);
& li {
margin: 0px !important;
margin-bottom: 0.75rem !important;
padding: 0px !important;
line-height: 1.35 !important;
text-wrap: pretty;
&::marker {
line-height: 0px;
color: #999999;
font-size: 14px;
}
}
& li:last-child() {
margin: 0px !important;
margin-bottom: 0px !important;
}
& li:hover {
&::marker {
color: #630605;
}
}
}
}
/* Tabs Section */
.tabs-section {
padding: 50px 51px;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
position: relative;
margin-top: 6rem;
}
.tabs-section:before {
content: " ";
position: absolute;
top: 30px;
left: -25vw;
width: 150vw;
height: 1px;
background-color: #e8e8e8;
}
/* .tabs-section::before {
content: "";
position: absolute;
height: 150%;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
background: radial-gradient(
35% 50% at 50% 30%,
rgba(0, 0, 255, 1) 0%,
rgba(0, 0, 255, 1) 80%,
rgba(0, 0, 255, 0) 100%
);
overflow: visible;
}
*/
.tabs-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 1px;
position: relative;
height: 100%;
width: 100%;
}
.tabs-card {
display: flex;
flex-direction: column;
max-width: 1290px;
align-items: flex-start;
width: 100%;
height: fit-content;
background-color: white;
border-radius: 0px;
overflow: hidden;
box-shadow: 0px 22px 20px -8px rgba(0, 0, 0, 0.04),
0px 40px 60px -12px rgba(0, 0, 0, 0.03),
0px 12px 12px -4px rgba(0, 0, 0, 0.06);
}
.tabs-wrapper {
width: 100%;
display: flex;
flex-direction: column;
max-width: 1290px;
align-items: flex-start;
height: fit-content;
}
.tabs-list {
display: flex;
align-items: flex-start;
position: relative;
align-self: stretch;
width: 100%;
/* background-color: white; */
border-radius: 0;
height: auto;
gap: 1px;
}
.tab-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
position: relative;
flex: 1;
background: #ffffff;
border-radius: 0;
height: auto;
font-family: "Geist", Helvetica;
font-weight: 300;
color: #202122;
font-size: 15px;
text-align: center;
letter-spacing: 0.75px;
line-height: 18px;
opacity: 0.7;
cursor: pointer;
border: 1px solid #ffffff;
overflow: hidden;
transition: opacity 0.25s ease, background 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 650ms cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1),
border 300ms cubic-bezier(0.4, 0, 0.2, 1),
color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-trigger.active {
background-color: white;
border: 1px dotted #dddddd;
border-bottom: 0px solid #ffffff;
box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.1),
0px 8px 14px -3px rgba(0, 0, 0, 0.08);
font-family: "Geist", Helvetica;
font-weight: 300;
color: #630605;
opacity: 1;
transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 650ms cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1),
border 300ms cubic-bezier(0.4, 0, 0.2, 1),
color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-content-wrapper {
position: relative;
z-index: 0;
display: flex;
min-height: 350px;
height: min-content;
width: calc(100% - 0px);
margin-top: 24px;
background: linear-gradient(
175deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.15) 50%,
rgba(0, 0, 0, 0.2) 100%
);
}
.tabs-content-underlay {
position: absolute;
z-index: 9;
inset: 1px; /* sits in the wrapper */
display: flex;
background: #ffffff;
}
.tab-content {
position: absolute;
z-index: 999;
inset: 1px; /* sits in the wrapper */
display: flex;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.45s ease-out, transform 0.45s ease-out;
pointer-events: none;
flex-direction: column;
align-items: flex-start;
padding: 0px;
border-radius: 0px;
overflow: hidden;
margin: 0;
}
.tab-content.active {
display: flex;
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.tab-content-inner {
display: flex;
align-items: center;
flex: 1;
align-self: stretch;
width: 100%;
height: fit-content;
background-color: white;
overflow: hidden;
position: relative;
border: 0px solid #e8e8e8;
flex-direction: row;
}
.tab-content-left {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 60px;
position: relative;
width: 60%;
height: fit-content;
border-right: 1px solid #e8e8e8;
}
.tab-content-title {
position: relative;
width: 100%;
height: auto;
font-weight: 400;
font-style: italic;
color: black;
letter-spacing: 0;
line-height: 1.25;
white-space: nowrap;
}
.tab-content-description-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0px;
padding: 0px;
position: relative;
align-self: stretch;
width: 100%;
margin-top: 0;
height: fit-content;
}
.tab-content-right {
position: relative;
width: 50%;
flex-shrink: 1;
height: 100%;
display: flex;
align-items: flex-end;
padding-top: 400px;
}
.tab-content-image {
padding-top: 100px;
background-position: center center;
}
.tab-content-image.tab-dev {
background: url(https://media-production.lp-cdn.com/cdn-cgi/image/format=auto,quality=85/https://media-production.lp-cdn.com/media/0505d3f4-5d3a-429b-ac57-5f597662f4fb)
50% 35% / cover;
}
.tab-content-image.tab-indv {
background: url(https://media-production.lp-cdn.com/cdn-cgi/image/format=auto,quality=85,fit=scale-down,width=1920/https://media-production.lp-cdn.com/media/72594acf-08f5-4e51-b604-34fee508aecf)
50% 35% / cover;
}
.tab-content-image.tab-inst {
background: url(https://media-production.lp-cdn.com/cdn-cgi/image/format=auto,quality=85,fit=scale-down,width=1920/https://media-production.lp-cdn.com/media/0786c0eb-75d4-4f77-bfda-770a08e20c82)
50% 35% / cover;
}
.tab-content-image.tab-intl {
background: url(https://media-production.lp-cdn.com/cdn-cgi/image/format=auto,quality=85/https://media-production.lp-cdn.com/media/0505d3f4-5d3a-429b-ac57-5f597662f4fb)
50% 35% / cover;
}
@media (max-width: 1200px) {
.tab-content-left {
padding: 48px;
width: 80%;
border-right: 1px solid #e8e8e8;
}
.description {
font-size: 15px;
& p {
font-size: 15px !important;
}
& ul {
& li {
font-size: 15px !important;
margin-bottom: 0.75rem !important;
&::marker {
font-size: 13px;
}
}
}
}
.tabs-content-wrapper {
min-height: 350px;
height: fit-content;
}
}
@media (max-width: 900px) {
.description {
font-size: 15px;
& p {
font-size: 15px !important;
}
& ul {
& li {
font-size: 15px !important;
margin-bottom: 0.75rem !important;
&::marker {
font-size: 13px;
}
}
}
}
.tabs-container {
background: radial-gradient(
40% 40% at 50% 35%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.9) 74%,
rgba(255, 255, 255, 0) 100%
);
}
.tabs-content-wrapper {
min-height: 450px;
height: fit-content;
}
.tab-content-inner {
flex-direction: column-reverse;
}
.tab-content-left,
.tab-content-right {
width: 100%;
}
.tab-content-right {
height: 300px;
}
.tab-content-left {
width: 80%;
padding: 32px 48px;
border-right: 0px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
}
@media (max-width: 768px) {
.description {
font-size: 14px;
& p {
font-size: 14px !important;
}
& ul {
& li {
font-size: 14px !important;
margin-bottom: 0.75rem !important;
&::marker {
font-size: 11px;
}
}
}
}
.tabs-section {
padding: 0 26px;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
position: relative;
}
.tabs-container {
background: radial-gradient(
40% 40% at 50% 35%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.9) 74%,
rgba(255, 255, 255, 0) 100%
);
}
.tab-content-inner {
flex-direction: column-reverse;
}
.tab-content-left,
.tab-content-right {
width: 100%;
}
.tab-content-right {
height: 300px;
}
.tab-content-left {
padding: 32px;
border-right: 0px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
.tabs-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: radial-gradient(
calc(50%) 2px at 50% 50%,
#e8e8e8 0%,
rgba(255, 255, 255, 0.9) 74%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2px calc(50%) at 50% 50%,
#e8e8e8 0%,
rgba(255, 255, 255, 0.9) 74%,
rgba(255, 255, 255, 0) 100%
);
}
.tab-trigger {
flex: 0 0 50%;
flex-basis: calc(50% - 0.75px);
padding: 12px 10px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.tab-content-left {
padding: 32px;
}
.tabs-list {
display: flex;
flex-direction: row;
}
.tab-trigger {
flex: 0 0 50%;
flex-basis: calc(50% - 0.75px);
padding: 12px 10px;
font-size: 13px;
}
}
/* ===== TAB-TRIGGER PROGRESS BAR ======================================= */
/* lets ::after sit on top */
.tab-trigger::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 3px;
background: #630605;
transform-origin: left center;
transform: scaleX(0);
}
/* gets added / removed by JS to (re)start the bar */
.tab-trigger.progress::after {
animation: tabProgress 5s linear forwards; /* keep in sync with JS ROTATE_MS */
}
@keyframes tabProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* ===== TAB CONTENT FADE / SLIDE ======================================= */
/* ===== SUBTLE TRIGGER FADE ============================================ */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment