
<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>Google Ad Preview Tool</b></h1>
						<h4 class="text-center text-white">Build your own Google Text Ad copy. Embellish them with ad extensions like site links, call out, advertiser ratings, and so on. Share the link to this ad to your client or boss.</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">

			<style type="text/css">
				.change_width {
					position: absolute;
					z-index: 9999;
					right: 10px;
					font-size: 20px;
					text-align: center;
				}

				.change_width ul li {
					border: .5px solid #18113c33;
					padding: 5px;
				}

				.change_width .fa-television {
					font-size: 15px;
				}

				.change_width .fa-mobile {
					font-size: 25px;
				}
			</style>
			<script type="text/javascript">
				function chnage_size(e) {
					if (e == 2) {
						$('.size').css('width', "65%");
						$('.icon_google').hide();
						$('#google_icon').hide();
						$('#google_content').addClass('col-md-12');
						$('#google_content').removeClass('col-md-10');
						$('#tips').hide();
					} else {
						$('.size').css('width', "100%");
						$('.icon_google').show();
						$('#google_icon').show();
						$('#google_content').addClass('col-md-12');
						$(".icon_google").removeAttr("style");
						$('#google_content').removeClass('col-md-12');
						$('#tips').show();
					}
				}
			</script>
			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div class="row">
						<div class="col-lg-5 col-xl-5 col-md-5 mx-auto">
							<div class="card ">
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div class="input-group mt-5">
										<span class="input-group-text">Main URL</span>
										<input type="text" class="form-control snippetUrl" oninput="urlwithpx(this);" placeholder="Enter Main URL">
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text"> URL Path</span>
										<input type="text" class="form-control" oninput="urlPathOne(this.value)" placeholder="Enter URL Heading 1">
										<span class="input-group-text bg-success" id="urlOne">15</span>
										<span class="input-group-text">/</span>
										<input type="text" oninput="urlPathTwo(this.value)" class="form-control" placeholder="Enter URL Heading 2">
										<span class="input-group-text bg-success" id="urlTwo">15</span>
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text">Heading 1</span>
										<input type="text" class="form-control" placeholder="Enter Heading 1" oninput="headingOne(this.value)">
										<span class="input-group-text bg-success" id="h-one">30</span>
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text">Heading 2</span>
										<input type="text" class="form-control" placeholder="Enter Heading 2" oninput="headingTwo(this.value)">
										<span class="input-group-text bg-success" id="h-two">30</span>
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text">Heading 3</span>
										<input type="text" class="form-control" placeholder="Enter Heading 3" oninput="headingThree(this.value)">
										<span class="input-group-text bg-success" id="h-three">30</span>
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text">Description 1</span>
										<textarea type="text" class="form-control" placeholder="Enter Description 1" oninput="descriptionOne(this.value)"></textarea>
										<span class="input-group-text bg-success" id="d-one">90</span>
									</div>
									<div class="input-group mt-5">
										<span class="input-group-text">Description 2</span>
										<textarea type="text" class="form-control" placeholder="Enter Description 2" oninput="descriptionTwo(this.value)"></textarea>
										<span class="input-group-text bg-success" id="d-two">90</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-7 col-xl-7 col-md-7">
							<div class="card mb-0 single-page size customerpage contact">
								<div class="change_width d-none d-lg-block">
									<ul>
										<li><a href="javascript:void(0)" onclick="chnage_size(1)"><i class="fa fa-television"></i></a></li>
										<li class="mt-3"><a href="javascript:void(0)" onclick="chnage_size(2)"><i class="fa fa-mobile"></i></a></li>
									</ul>
								</div>
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div id="google-snippet">
										<div class="row">
											<div class="col-md-12" id="google_content">
												<div class="snippet-box">
													<span style="color:#000!important"><b>Ad&nbsp;·</b></span>
													<span class="main-url">http://www.example.com</span>
													<span class="url-1 ml--5">/url-heading-1</span>
													<span class="url-2 ml--5">/url-heading-2</span>
													<span class="fa fa-caret-down"></span>
													<br />
													<span class="pt-2 d-lg-block"></span>
													<span class="heading-title" id="heading-1">Excited About Expanded Ads?</span>
													<span class="heading-title" id="heading-2">| Get Started With Preview Tool</span>
													<span class="heading-title" id="heading-3">| Free Tool By Dotcomvidya</span>
													<span class="pt-2 d-lg-block"></span>
													<span class="snippet-description" id="description-1">Start Building Awesome Ads. Impress Your Boss and Clients with Screenshots of Great Ads.</span>
													<span class="snippet-description" id="description-2">3 Headlines. 2 Descriptions of 90 Characters. Highlight Features of Your Service/Product.</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--Section-->
<script type="text/javascript">
	function descriptionTwo(e) {
		var headtwo = e.length;
		if (headtwo < 1) {
			$("#description-2").html("3 Headlines. 2 Descriptions of 90 Characters. Highlight Features of Your Service/Product.");
			$('#d-two').html('90');
			$('#d-two').addClass('bg-success');
		} else {
			var count = 90 - headtwo;
			$("#description-2").html(e);
			$('#d-two').html(count);
			if (count < 1) {
				$('#d-two').removeClass('bg-success');
				$('#d-two').css('background-color', "red");
			} else {
				$('#d-two').addClass('bg-success');
			}
		}
	}

	function descriptionOne(e) {
		var headOne = e.length;
		if (headOne < 1) {
			$("#description-1").html("Start Building Awesome Ads. Impress Your Boss and Clients with Screenshots of Great Ads.");
			$('#d-one').html('90');
			$('#d-one').addClass('bg-success');
		} else {
			var count = 90 - headOne;
			$("#description-1").html(e);
			$('#d-one').html(count);
			if (count < 1) {
				$('#d-one').removeClass('bg-success');
				$('#d-one').css('background-color', "red");
			} else {
				$('#d-one').addClass('bg-success');
			}
		}
	}

	function headingThree(e) {
		var headThree = e.length;
		if (headThree < 1) {
			$("#heading-3").html("| Get Started With Preview Tool");
			$('#h-three').html('30');
			$('#h-three').addClass('bg-success');
		} else {
			var count = 30 - headThree;
			$("#heading-3").html("| " + e);
			$('#h-three').html(count);
			if (count < 1) {
				$('#h-three').removeClass('bg-success');
				$('#h-three').css('background-color', "red");
			} else {
				$('#h-three').addClass('bg-success');
			}
		}
	}

	function headingTwo(e) {
		var headTwo = e.length;
		if (headTwo < 1) {
			$("#heading-2").html("| Get Started With Preview Tool");
			$('#h-two').html('30');
			$('#h-two').addClass('bg-success');
		} else {
			var count = 30 - headTwo;
			$("#heading-2").html("| " + e);
			$('#h-two').html(count);
			if (count < 1) {
				$('#h-two').removeClass('bg-success');
				$('#h-two').css('background-color', "red");
			} else {
				$('#h-two').addClass('bg-success');
			}
		}
	}

	function headingOne(e) {
		var headOne = e.length;
		if (headOne < 1) {
			$("#heading-1").html("Excited About Expanded Ads?");
			$('#h-one').html('30');
			$('#h-one').addClass('bg-success');
		} else {
			var count = 30 - headOne;
			$("#heading-1").html(e);
			$('#h-one').html(count);
			if (count < 1) {
				$('#h-one').removeClass('bg-success');
				$('#h-one').css('background-color', "red");
			} else {
				$('#h-one').addClass('bg-success');
			}
		}
	}

	function urlPathTwo(e) {
		var pathTwo = e.length;
		if (pathTwo < 1) {
			$(".url-2").html("/url-heading-2");
			$('#urlTwo').html('15');
			$('#urlTwo').addClass('bg-success');
		} else {
			var count = 15 - pathTwo;
			$(".url-2").html("/" + e);
			$('#urlTwo').html(count);
			if (count < 1) {
				$('#urlTwo').removeClass('bg-success');
				$('#urlTwo').css('background-color', "red");
			} else {
				$('#urlTwo').addClass('bg-success');
			}
		}
	}

	function urlPathOne(e) {
		var pathOne = e.length;
		if (pathOne < 1) {
			$(".url-1").html("/url-heading-1");
			$('#urlOne').html('15');
			$('#urlOne').addClass('bg-success');
		} else {
			var count = 15 - pathOne;
			$(".url-1").html("/" + e);
			$('#urlOne').html(count);
			if (count < 1) {
				$('#urlOne').removeClass('bg-success');
				$('#urlOne').css('background-color', "red");
			} else {
				$('#urlOne').addClass('bg-success');
			}
		}
	}

	function urlwithpx(e) {
		var descriptionchar = $(".snippetUrl").val().length;
		if (descriptionchar < 1) {
			$(".main-url").html("http://www.example.com");
		} else {
			$(".main-url").html(e.value);
		}
	}
</script>
<style type="text/css">
	.form-control {
		border: 1px solid #ced4da;
	}

	.input-group-text {
		display: flex;
		align-items: center;
		padding: 0.1rem 0.5rem;
		font-size: .8rem;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		text-align: center;
		white-space: nowrap;
		background-color: #e9ecef;
		border: 1px solid #ced4da;
		border-radius: 0.25rem;
	}

	.ml--5 {
		margin-left: -3px;
	}

	.contact {
		height: 100%;
	}

	.px_class {
		float: right;
	}

	.single-page .wrapper.wrapper2 {
		color: #000;
	}

	/* .pagetitle, .snippetUrl, .description {
    font-size: 16px;
    margin-top: 5px;
    border-radius: 0px;
    border-bottom: 3px solid #008329;
    width: 650px;
} */
	.snippet-box {
		line-height: 1.5em;
	}

	.main-url {
		color: #000;
		font-style: normal;
		white-space: nowrap;
		font-family: arial, sans-serif;
		font-weight: normal;
		font-size: 14px;
	}

	.snippet-description {
		padding-right: 5px;
		word-wrap: break-word;
		color: #545454;
		font-family: arial, sans-serif;
		font-weight: normal;
		font-size: 13px;
	}

	.heading-title {
		color: #1a0dab;
		font-weight: normal;
		font-size: 18px;
		font-family: arial, sans-serif;
	}

	#google-snippet {
		background-color: #ffffff;
		/*  margin-bottom: 15px; */
		text-align: left;
		padding-right: 10px;
	}

	@media (min-width: 1199px) {
		#google-snippet {
			height: 95px;
		}
	}

	#google_icon {
		width: 77px;
		height: 75px;
		margin-top: 10px;
		margin-left: 27px;
	}
</style>