<section class="margin-top-xs-55" style="position: relative;
">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">
					<svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
						<defs>
							<g id="shape">
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
							</g>
							<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
								<stop stop-color="#4169E1"></stop>
								<stop offset="1" stop-color="#071A34"></stop>
							</radialGradient>
						</defs>
						<use href="#shape"></use>
					</svg>
					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>
					<div class="text-body main-header-text">
						<h1 class="text-center text-white"><b>Online Slug Generator</b></h1>
						<h4 class="text-center text-white">Enter String to Make SEO Friendly URL</h4>
					</div>
				</div>

				<div class="floating-icons">
					<i class="icon-facebook"></i>
					<i class="icon-adwords"></i>
					<i class="icon-seo"></i>
					<i class="icon-instagram"></i>
					<i class="icon-activecampaign"></i>
					<i class="icon-wordpress"></i>
					<i class="icon-shopify"></i>
					<i class="icon-youtube"></i>
					<i class="icon-analytics"></i>
					<i class="icon-kk"></i>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="sptb">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div class="row justify-content-center">

						<div class="col-lg-8 col-xl-8 col-md-12 mx-auto mt-5">
							<div class="card mb-0 single-page customerpage contact">
								<div class="card-body wrapper wrapper2 box-shadow-0" style="border :2px dotted #be1502">
									<div class="name">
										<label class="text-center">Slug</label>
										<input type="text" class="form-control info-textarea pagetitle" name="info-textarea" oninput="toSeoUrl(this.value)" placeholder="Enter Slug String">
									</div>

									<div class="name mt-5">
										<label>SEO Friendly URL</label>
										<textarea readonly rows="3" cols="8" class="form-control descriptionchar description" name="description" placeholder="Enter Slug String & Copy From here" id="main_slug"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--Section-->
<script type="text/javascript">
	function toSeoUrl(url) {
		var slug = url.toString() // Convert to string
			.normalize('NFD') // Change diacritics
			.replace(/[\u0300-\u036f]/g, '') // Remove illegal characters
			.replace(/\s+/g, '-') // Change whitespace to dashes
			.toLowerCase() // Change to lowercase
			.replace(/&/g, '-and-') // Replace ampersand
			.replace(/[^a-z0-9\-]/g, '') // Remove anything that is not a letter, number or dash
			.replace(/-+/g, '-') // Remove duplicate dashes
			.replace(/^-*/, '') // Remove starting dashes
			.replace(/-*$/, ''); // Remove trailing dashes

		$('#main_slug').val(slug);
	}
</script>