Reply To: I need this section CSS

[Support]

Hello,

This section do not requires any extra CSS code. Just copy and paste the HTML where you want.

Here’s the needed HTML:

<section id="support" class="section section-angled bg-light border-0 m-0 position-relative z-index-3 pt-0">
	<div class="container pb-5 mb-5">
		<div class="row align-items-center mb-5">
			<div class="col-lg-6 pr-xl-5 mb-5 mb-lg-0">
				<h2 class="font-weight-bold text-9 mb-1">Professional Support</h2>
				<h5 class="font-weight-semibold positive-ls-2 text-4 text-primary mb-3">ONLINE DOCUMENTATION, VIDEOS AND FORUM</h5>
				<p class="ls-0 text-default fw-400 mb-5">Any problem while using Porto? We're here to help you.</p>
				<div class="d-flex align-items-center border border-top-0 border-right-0 border-left-0 pb-4 mb-4">
					<i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 mr-3"></i>
					<p class="mb-0"><b class="text-color-dark">Online Documentation -</b> Contains all descriptions related to Porto usage and features.</p>
				</div>
				<div class="d-flex align-items-center border border-top-0 border-right-0 border-left-0 pb-4 mb-4">
					<i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 mr-3"></i>
					<p class="mb-0"><b class="text-color-dark">Video Documentation -</b> Need visual instructions? Check our video tutorials.</p>
				</div>
				<div class="d-flex align-items-center pb-4 mb-4">
					<i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 mr-3"></i>
					<p class="mb-0"><b class="text-color-dark">Support Center -</b> Contact us if you get any issue while using Porto, reply within 16 hrs.</p>
				</div>
			</div>
			<div class="col-lg-4 offset-lg-2">
				<div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500">
					<img class="img-fluid" src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_dots2.png" alt="" style="position: absolute; bottom: -2%; left: -43%; transform: rotate(90deg)">
				</div>
				<img alt="Porto Support" src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/support_login.jpg" class="img-fluid border border-width-10 border-color-light rounded box-shadow-3 ml-5 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="200" style="width: 590px; max-width: none;">
				<img alt="Porto Documentation" src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_docs.jpg" class="img-fluid  rounded box-shadow-3 position-absolute appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="700" style="left: -100px; bottom: 50px;">
			</div>
		</div>
	</div>
	<div class="section-angled-layer-bottom section-angled-layer-increase-angle" style="padding: 4rem 0; background: #222529;"></div>
</section>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---