Best HTML Banner Code Generator-Get A free code and script

HTML Banner Code Generator>

This is a live demo and preview. Get this HTML Banner Code Generator for free for your own websites and blogs
HTML Banner Code Generator

This is Code and demo of HTML Banner Code Generator. Copy this code and paste it into your own website and blog posts.

<html>
<head>
	<title>HTML Banner Code Generator</title>
	<style>
		form {
			margin: 0 auto;
			max-width: 400px;
			padding: 20px;
			box-shadow: 0 2px 20px rgba(0, 0, 0, 1), 0 0 0 5px #006db0;
			border-radius: 0px;
		}

label {
			display: block;
			margin-bottom: 10px;
		}

input[type="text"],
		select,
		input[type="color"] {
			padding: 10px;
			font-size: 16px;
			border-radius: px;
			border: 3px solid #ccc;
			box-sizing: border-box;
			margin-bottom: 20px;
			width: 100%;
			max-width: 400px;
		}

button {
			padding: 10px 20px;
			font-size: 16px;
			border-radius: px;
			border: none;
			background-color: #007bff;
			color: #fff;
			cursor: pointer;
		}

button:hover {
			background-color: #0062cc;
		}

#output {
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.5;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-style: solid;
			border-width: 1px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<form>
		<label for="banner-text">Banner Text:</label>
		<input id="banner-text" type="text" />
		<label for="banner-width">Banner Width (in px):</label>
		<input id="banner-width" type="text" />
		<label for="banner-height">Banner Height (in px):</label>
		<input id="banner-height" type="text" />
		<label for="border-size">Border Size (in px):</label>
		<input id="border-size" type="text" />
		<label for="border-color">Border Color:</label>
		<input id="border-color" type="text" />
		<label for="bg-color">Background Color:</label>
		<input id="bg-color" type="color" />
		<label for="font">Font:</label>
		<select id="font">
			<option value="Arial">Arial</option>
			<option value="Times New Roman">Times New Roman</option>
			<option value="Verdana">Verdana</option>
			<option value="Courier New">Courier New</option>
			<option value="Georgia">Georgia</option>
			<option value="Comic Sans MS">Comic Sans MS</option>
			<option value="Tahoma">Tahoma</option>
		</select>
		<label for="font-size">Font Size:</label>
		<input id="font-size" type="text" />
		<label for="text-align">Text Align:</label>
		<select id="text-align">
			<option value="left">Left</option>
			<option value="center">Center</option>
			<option value="right">Right</option>
		</select>
		<label for="text-margin">Text Margin (in px):</label>
		<input id="text-margin" type="text" />
		<label for="text-color">Text Color:</label>
		<input id="text-color" type="color" />
		<button onclick="generateBanner()" type="button">Generate Banner</button>
		<button onclick="resetFields()" type="button">Reset</button>
	</form>
	<div id="output"></div>

// Create banner element
			const banner = document.createElement('div');
			banner.style.width = bannerWidth + 'px';
			banner.style.height = bannerHeight + 'px';
			banner.style.border = borderSize + 'px solid ' + borderColor;
			banner.style.backgroundColor = bgColor;
			banner.style.display = 'flex';
			banner.style.alignItems = 'center';
			banner.style.justifyContent = 'center';

// Create text element
			const text = document.createElement('span');
			text.style.fontFamily = font;
			text.style.fontSize = fontSize + 'px';
			text.style.textAlign = textAlign;
			text.style.margin = textMargin + 'px';
			text.style.color = textColor;
			text.textContent = bannerText;

// Add text element to banner
			banner.appendChild(text);

// Add banner to output element
			const output = document.getElementById('output');
			output.innerHTML = '';
			output.appendChild(banner);
		}

function resetFields() {
			document.getElementById('banner-text').value = '';
			document.getElementById('banner-width').value = '';
			document.getElementById('banner-height').value = '';
			document.getElementById('border-size').value = '';
			document.getElementById('border-color').value = '';
			document.getElementById('bg-color').value = '#ffffff';
			document.getElementById('font').value = 'Arial';
			document.getElementById('font-size').value = '';
			document.getElementById('text-align').value = 'left';
			document.getElementById('text-margin').value = '';
			document.getElementById('text-color').value = '#000000';
			document.getElementById('output').innerHTML = '';
		}
	</script>
</body>
</html>

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Best HTML Banner Code Generator-Get A free code and script

Code Editor

Code Editor

Popular

Tags

Navigation