PHP File Converter>

This is a live demo and preview. Get this PHP File Converter for free for your own websites and blogs
File Converter

File Converter

This is Code and demo of PHP File Converter. 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 PHP File Converter-Get A free code and script

File Converter

Code Editor

Code Editor

Popular

Tags

Navigation