<section class="landing-block">
	<div class="g-pb-70">
		<div class="landing-block-node-bgimg g-pt-150 g-pos-rel u-bg-overlay g-bg-img-hero g-bg-image"
			 style="--bg-url: url('https://cdn.bitrix24.site/bitrix/images/landing/business/1920x1281/img1.jpg'); --bg-url-2x: url('https://cdn.bitrix24.site/bitrix/images/landing/business/1920x1281/img1.jpg'); --bg-overlay: hsla(0, 0%, 0%, 0.7); --bg-size: cover; --bg-attachment: scroll;">
			<div class="landing-block-node-container js-animation fadeInUp container g-max-width-750 u-bg-overlay__inner g-mb-60">

				<h2 class="landing-block-node-title text-center text-uppercase g-font-weight-700 g-font-size-60 g-mb-30 g-mb-70--md g-color" style="--color: #ffffff;">
					UI & UX Design #YEAR#
				</h2>

				<div class="row g-mx-minus-5">
					<div class="col-md-4 col-lg-4 g-px-5 g-mb-20 g-mb-0--md">
						<div class="media">
							<div class="landing-block-node-date-icon-container media-left d-flex align-self-center g-mr-20 g-mb-auto g-font-size-27 g-color" style="--color: hsla(0, 0%, 100%, 0.5);">
								<i class="landing-block-node-date-icon fa fa-calendar"></i>
							</div>

							<div class="media-body text-uppercase">
								<div class="landing-block-node-date-title g-mb-5 g-font-size-14 g-color" style="--color: hsla(0, 0%, 100%, 0.5);">
									<span style="font-weight: bold;">
										When
									</span>
								</div>
								<h3 class="landing-block-node-date-text text-uppercase g-font-size-15 mb-0 g-color" style="--color: #ffffff;">
									July 12, #YEAR#
								</h3>
							</div>
						</div>
					</div>

					<div class="col-md-5 col-lg-5 g-px-5 g-mb-20 g-mb-0--md">
						<div class="media">
							<div class="landing-block-node-place-icon-container media-left d-flex align-self-center g-mr-20 g-mb-auto g-font-size-27 g-color" style="--color: hsla(0, 0%, 100%, 0.5);">
								<i class="landing-block-node-place-icon fa fa-map-marker"></i>
							</div>

							<div class="media-body text-uppercase">
								<div class="landing-block-node-place-title g-mb-5 g-font-size-14 g-color" style="--color: hsla(0, 0%, 100%, 0.5);">
									<span style="font-weight: bold;">
										Where
									</span>
								</div>
								<h3 class="landing-block-node-place-text text-uppercase g-font-size-15 mb-0 g-color" style="--color: #ffffff;">
									Concert Hall, <br> Los Angeles, USA
								</h3>
							</div>
						</div>
					</div>

					<div class="col-md-3 col-lg-3 text-md-right g-px-5">
						<a class="landing-block-node-button btn g-btn-type-solid text-uppercase rounded-0 g-width-100x g-btn-size-md g-button-color g-color g-color--hover"
						   href="#" style="--button-color-contrast: hsla(0, 0%, 30%, 1); --button-color-hover: hsla(0, 0%, 100%, 1); --button-color-light: hsla(0, 0%, 100%, 1); --button-color: #ffffff; --color: hsla(0, 0%, 0%, 1); --color-hover: hsla(0, 0%, 29%, 1);">Register Now</a>
					</div>
				</div>
			</div>

			<div class="container u-bg-overlay__inner g-bottom-minus-70 px-0 g-z-index-2">
				<div class="row u-shadow-v23 mx-0">
					<div class="landing-block-slider col-md-6 col-lg-6 px-0" data-slider-arrows="3" data-slider-animation="1">
						<div class="js-carousel text-center u-carousel-v5 g-overflow-hidden h-100"
							 data-infinite="true"
							 data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-40 g-height-40 g-font-size-20 g-transition-0_2 g-transition--ease-in g-color-white g-bg-primary g-opacity-0_8--hover"
							 data-arrow-left-classes="fa fa-angle-left g-left-0"
							 data-arrow-right-classes="fa fa-angle-right g-right-0">
							<img class="landing-block-node-card landing-block-node-card-img js-slide g-object-fit-cover" src="https://cdn.bitrix24.site/bitrix/images/landing/business/1000x667/img1.jpg" alt="">
							<img class="landing-block-node-card landing-block-node-card-img js-slide g-object-fit-cover" src="https://cdn.bitrix24.site/bitrix/images/landing/business/1000x667/img2.jpg" alt="">
						</div>
					</div>

					<div class="landing-block-node-inner-block col-md-6 col-lg-6 d-flex g-min-height-50vh g-py-80 g-py-20--md g-px-50 g-bg" style="--bg: hsla(360, 0%, 14%, 1);">
						<div class="align-self-center w-100">
							<h2 class="landing-block-node-block-title text-uppercase g-font-weight-700 g-mb-10 g-color" style="--color: #ffffff;">
								About The Event
							</h2>
							<h6 class="landing-block-node-block-subtitle text-uppercase g-mb-20 g-color" style="--color: #ffffff;">
								Subtitle Goes Here
							</h6>
							<div class="landing-block-node-block-text mb-0 g-color" style="--color: #ffffff;">
								<p>This is a placeholder paragraph. It provides an example of how your text will appear in this space. Feel free to replace it with your own content.</p>
								<p>Another placeholder paragraph is here to demonstrate text formatting. Customize it with your own information to suit your needs. You can add more details or examples to make it more relevant to your audience. Remember, this is just a starting point for your creative ideas.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>