<section class="py-12 py-md-16 py-lg-24">
<div class="container">
<div class="mw-sm mw-lg-lg mb-16">
<span class="badge mb-4 bg-primary-light text-primary border border-info">Events</span>
<h3 class="font-heading mb-0">Engage in our weekly online events</h3>
</div>
<div class="overflow-scroll pb-2 mb-12">
<div style="min-width: max-content;">
<div class="position-relative p-6 border border-light rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
<div class="position-absolute bottom-0 start-0 w-100 py-14" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 53.65%, #FFF 100%);"></div>
<div class="d-flex mb-4 flex-wrap align-items-center justify-content-between">
<div>
<select class="form-select ps-1 py-1 pe-9 border-0 fw-bold" name="" id="">
<option value="1">August 2023</option>
<option value="2">July 2023</option>
<option value="3">June 2023</option>
</select>
</div>
<div class="d-flex flex-wrap align-items-center">
<span class="d-inline-block py-3 px-4 me-2 small fw-semibold lh-1 border border-light rounded-pill shadow">Today</span>
<button class="btn btn-outline-light p-0 me-2 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<button class="btn btn-outline-light p-0 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
<div class="row h-100">
<div class="col h-100 px-0">
<div class="d-flex flex-column h-100 border-end border-light">
<div class="text-center border-bottom border-top border-light">
<span class="d-block py-2 text-light-dark fw-semibold">Mon</span>
</div>
<div class="border-end border-light">
<a class="d-block py-3 px-4 bg-warning-light" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-2 d-flex align-items-center justify-content-center bg-primary rounded-1" style="width: 20px; height: 20px;">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17496 2.16C8.89996 1.455 8.22996 1 7.47496 1H4.52496C3.76996 1 3.09996 1.455 2.82496 2.16C2.55496 2.87 2.73996 3.655 3.30496 4.165L5.32496 6H6.67996L8.69996 4.165C9.25996 3.655 9.44496 2.87 9.17496 2.16ZM6.90996 3.615H5.08996C4.89996 3.615 4.74996 3.46 4.74996 3.275C4.74996 3.09 4.90496 2.935 5.08996 2.935H6.90996C7.09996 2.935 7.24996 3.09 7.24996 3.275C7.24996 3.46 7.09496 3.615 6.90996 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<span class="d-block small text-primary-dark fw-semibold">Study Method with Mark</span>
<span class="d-block mb-3 small text-light-dark">9:00 AM − 10:00 AM (1h)</span>
<span class="badge bg-primary-light text-primary border border-warning">Producvitity</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col h-100 px-0">
<div class="d-flex flex-column h-100 border-end border-light">
<div class="text-center border-bottom border-top border-light">
<span class="d-block py-2 text-light-dark fw-semibold">Tue</span>
</div>
<div class="mt-auto">
<a class="d-block py-3 px-4 border-top border-light" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-2 d-flex align-items-center justify-content-center bg-light-dark rounded-1" style="width: 20px; height: 20px;">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17499 2.16C8.89999 1.455 8.22999 1 7.47499 1H4.52499C3.76999 1 3.09999 1.455 2.82499 2.16C2.55499 2.87 2.73999 3.655 3.30499 4.165L5.32499 6H6.67999L8.69999 4.165C9.25999 3.655 9.44499 2.87 9.17499 2.16ZM6.90999 3.615H5.08999C4.89999 3.615 4.74999 3.46 4.74999 3.275C4.74999 3.09 4.90499 2.935 5.08999 2.935H6.90999C7.09999 2.935 7.24999 3.09 7.24999 3.275C7.24999 3.46 7.09499 3.615 6.90999 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<span class="d-block mb-1 small text-dark fw-semibold">Learning Through Collaborative Digital Cohorts</span>
<span class="d-block mb-3 small text-light-dark">16:00 PM − 16:30 PM (30m)</span>
<span class="badge text-success-dark border border-light">Producvitity</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col h-100 px-0">
<div class="d-flex flex-column h-100 border-end border-light">
<div class="text-center border-bottom border-top border-light">
<span class="d-block py-2 text-light-dark fw-semibold">Wed</span>
</div>
<a class="d-block mt-12 py-3 px-4 bg-warning-light" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-2 d-flex align-items-center justify-content-center bg-primary rounded-1" style="width: 20px; height: 20px;">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17496 2.16C8.89996 1.455 8.22996 1 7.47496 1H4.52496C3.76996 1 3.09996 1.455 2.82496 2.16C2.55496 2.87 2.73996 3.655 3.30496 4.165L5.32496 6H6.67996L8.69996 4.165C9.25996 3.655 9.44496 2.87 9.17496 2.16ZM6.90996 3.615H5.08996C4.89996 3.615 4.74996 3.46 4.74996 3.275C4.74996 3.09 4.90496 2.935 5.08996 2.935H6.90996C7.09996 2.935 7.24996 3.09 7.24996 3.275C7.24996 3.46 7.09496 3.615 6.90996 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<span class="d-block small text-primary-dark fw-semibold">Learners Mindset</span>
<span class="d-block mb-3 small text-light-dark">13:00 PM − 13:30 PM (30m)</span>
<span class="badge bg-primary-light text-primary border border-warning">Producvitity</span>
</div>
</div>
</a>
</div>
</div>
<div class="col px-0">
<div class="d-flex flex-column h-100 border-end border-light">
<div class="text-center border-bottom border-top border-light">
<span class="d-block py-2 text-light-dark fw-semibold">Thu</span>
</div>
<div class="mt-auto mb-24">
<a class="d-block py-3 px-4 bg-secondary-light" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-2 d-flex align-items-center justify-content-center bg-secondary rounded-1" style="width: 20px; height: 20px;">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.10984 7.01719L9.10998 7.0172V7.005C9.10998 6.52852 8.73128 6.12664 8.23801 6.125L6.23499 6.10497L6.23499 5.875H7.13999C7.62113 5.875 8.01499 5.48114 8.01499 5C8.01499 4.51886 7.62113 4.125 7.13999 4.125H6.23499V3.875H8.23498C8.71613 3.875 9.10998 3.48114 9.10998 3C9.10998 2.51886 8.71613 2.125 8.23498 2.125H6.35213C6.53249 1.74626 6.88444 1.5 7.23499 1.5H9.23498C9.78493 1.5 10.235 1.94723 10.235 2.5V9.5C10.235 10.0528 9.78493 10.5 9.23498 10.5H7.23499C6.88444 10.5 6.53249 10.2537 6.35213 9.875H7.68499C8.17546 9.875 8.55999 9.47679 8.55999 9C8.55999 8.52321 8.17546 8.125 7.68499 8.125H6.23499L6.23499 7.85503L8.22497 7.87497L8.22497 7.875H8.22998H8.22999H8.22999H8.23H8.23H8.23H8.23001H8.23001H8.23001H8.23002H8.23002H8.23003H8.23003H8.23003H8.23004H8.23004H8.23005H8.23005H8.23006H8.23006H8.23006H8.23007H8.23007H8.23008H8.23008H8.23008H8.23009H8.23009H8.2301H8.2301H8.23011H8.23011H8.23012H8.23012H8.23013H8.23013H8.23014H8.23015H8.23015H8.23016H8.23016H8.23017H8.23018H8.23018H8.23019H8.23019H8.2302H8.2302H8.23021H8.23021H8.23021H8.23022H8.23022H8.23022H8.23023H8.23023H8.23024H8.23024H8.23024H8.23025H8.23025H8.23026H8.23026H8.23027H8.23027H8.23027H8.23028H8.23028H8.23029H8.23029H8.2303H8.2303H8.23031H8.23031H8.23032H8.23032H8.23032H8.23033H8.23033H8.23034H8.23034H8.23035H8.23036H8.23036H8.23037H8.23037H8.23038H8.23038H8.23039H8.23039H8.2304H8.2304H8.23041H8.23041H8.23042H8.23043H8.23043H8.23044H8.23044H8.23045H8.23046H8.23046H8.23047H8.23047H8.23048H8.23049H8.23049H8.2305H8.23051H8.23051H8.23052H8.23053H8.23053H8.23054H8.23055H8.23055H8.23056H8.23057H8.23057H8.23058H8.23059H8.2306H8.2306H8.23061H8.23062H8.23062H8.23063H8.23064H8.23065H8.23065H8.23066H8.23067H8.23068H8.23069H8.23069H8.2307H8.23071H8.23072H8.23073H8.23073H8.23074H8.23075H8.23076H8.23077H8.23078H8.23079H8.23079H8.2308H8.23081H8.23082H8.23083H8.23084H8.23085H8.23086H8.23087H8.23087H8.23088H8.23089H8.2309H8.23091H8.23092H8.23093H8.23094H8.23095H8.23096H8.23097H8.23098H8.23099H8.231H8.23101H8.23102H8.23103H8.23104H8.23105H8.23106H8.23107H8.23108H8.23109H8.23111H8.23112H8.23113H8.23114H8.23115H8.23116H8.23117H8.23118H8.23119H8.23121H8.23122H8.23123H8.23124H8.23125H8.23126H8.23128H8.23129H8.2313H8.23131H8.23132H8.23134H8.23135H8.23136H8.23137H8.23139H8.2314H8.23141H8.23142H8.23144H8.23145H8.23146H8.23147H8.23149H8.2315H8.23151H8.23153H8.23154H8.23155H8.23157H8.23158H8.2316H8.23161H8.23162H8.23164H8.23165H8.23167H8.23168H8.23169H8.23171H8.23172H8.23174H8.23175H8.23177H8.23178H8.2318H8.23181H8.23183H8.23184H8.23186H8.23187H8.23189H8.2319H8.23192H8.23193H8.23195H8.23197H8.23198H8.232H8.23201H8.23203H8.23205H8.23206H8.23208H8.23209H8.23211H8.23213H8.23214H8.23216H8.23218H8.23219H8.23221H8.23223H8.23225H8.23226H8.23228H8.2323H8.23232H8.23233H8.23235H8.23237H8.23239H8.2324H8.23242H8.23244H8.23246H8.23248H8.2325H8.23251H8.23253H8.23255H8.23257H8.23259H8.23261H8.23263H8.23265H8.23267H8.23269H8.23271H8.23273H8.23274H8.23276H8.23278H8.2328H8.23282H8.23284H8.23286H8.23289H8.23291H8.23293H8.23295H8.23297H8.23299H8.23301H8.23303H8.23305H8.23307H8.23309H8.23312H8.23314H8.23316H8.23318H8.2332H8.23322H8.23325H8.23327H8.23329H8.23331H8.23333H8.23336H8.23338H8.2334H8.23342H8.23345H8.23347H8.23349H8.23352H8.23354H8.23356H8.23359H8.23361H8.23363H8.23366H8.23368H8.23371H8.23373H8.23375H8.23378H8.2338H8.23383H8.23385H8.23388H8.2339H8.23393H8.23395H8.23398H8.234H8.23403H8.23405H8.23408H8.2341H8.23413H8.23416H8.23418H8.23421H8.23423H8.23426H8.23429H8.23431H8.23434H8.23437H8.23439H8.23442H8.23445H8.23448H8.2345H8.23453H8.23456H8.23459H8.23461H8.23464H8.23467H8.2347H8.23473H8.23475H8.23478H8.23481H8.23484H8.23487H8.2349H8.23493H8.23496H8.23498C8.71838 7.875 9.09839 7.48645 9.10984 7.01719Z" fill="white" stroke="white"></path>
<path d="M4.22001 2.475V2.625C4.22001 2.90114 3.99616 3.125 3.72001 3.125H1.76501C1.48887 3.125 1.26501 2.90114 1.26501 2.625V2.475C1.26501 1.665 1.93001 1 2.74501 1C3.55501 1 4.22001 1.665 4.22001 2.475Z" fill="white"></path>
<path d="M1.26501 8.955C1.26501 9.18 1.36001 9.525 1.48001 9.715L1.88501 10.395C2.36001 11.185 3.13001 11.185 3.60001 10.395L4.01002 9.715C4.12502 9.525 4.22001 9.18 4.22001 8.955V4.375C4.22001 4.09886 3.99616 3.875 3.72001 3.875H1.76501C1.48887 3.875 1.26501 4.09886 1.26501 4.375V8.955Z" fill="white"></path>
</svg>
</div>
<div>
<span class="d-block small text-secondary fw-semibold">Journaling</span>
<span class="d-block mb-3 small text-light-dark">16:00 PM − 16:30 PM (30m)</span>
<span class="badge bg-secondary-light text-secondary-dark border border-secondary-dark">Wellness</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col px-0">
<div class="d-flex flex-column h-100">
<div class="text-center border-bottom border-top border-light">
<span class="d-block py-2 text-light-dark fw-semibold">Fri</span>
</div>
<div class="mt-12">
<a class="d-block py-3 px-4 border border-start-0 border-light" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-2 d-flex align-items-center justify-content-center bg-light-dark rounded-1" style="width: 20px; height: 20px;">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17499 2.16C8.89999 1.455 8.22999 1 7.47499 1H4.52499C3.76999 1 3.09999 1.455 2.82499 2.16C2.55499 2.87 2.73999 3.655 3.30499 4.165L5.32499 6H6.67999L8.69999 4.165C9.25999 3.655 9.44499 2.87 9.17499 2.16ZM6.90999 3.615H5.08999C4.89999 3.615 4.74999 3.46 4.74999 3.275C4.74999 3.09 4.90499 2.935 5.08999 2.935H6.90999C7.09999 2.935 7.24999 3.09 7.24999 3.275C7.24999 3.46 7.09499 3.615 6.90999 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<span class="d-block mb-1 small text-dark fw-semibold">Learning Through Collaborative Digital Cohorts</span>
<span class="d-block mb-3 small text-light-dark">16:00 PM − 16:30 PM (30m)</span>
<span class="badge text-success-dark border border-light">Producvitity</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="mw-4xl mx-auto p-8 border border-primary rounded-3">
<div class="d-flex flex-wrap mb-n4 justify-content-between align-items-center">
<div class="mw-2xl pe-8">
<h5 class="fw-bold mb-2">How I join the events?</h5>
<p class="text-light-dark">By signing up you can join the upcoming events, and access the past events. Some exclusive events are available for Pro subscription members.</p>
</div>
<a class="btn btn-sm btn-primary border border-primary-dark" href="#">Sign up now</a>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
