Free Website for Motorcycle and Small Engine Technicians

Engine Calculations

Resources

The following text box contains the html, javascript and css code necessary for a motorcycle or small engine technician to create a basic business website, and have an online presence. The webpage does not have all the bells and whistles found on larger websites, but I think it is a clean, and in my opinion, a professional looking webpage that will allow the technician's business to be found online. The webpage is styled to be easily viewed on both PC screens and mobile devices. All website photo's, icons and content were created by thesmallengineshop.net, and can be freely used by anyone. The person using the code only needs to change the title of the webpage, business name, phone number and email address, and the webpage is ready to use. All photo's and icons are hosted online at photobucket, and thesmallengineshop.net will not change or delete the photo's or icon's, so the user can leave the photo's and icon's the way they are and not worry about having them deleted or changed. Click here to view the example webpage

Instructions:

Place your mouse pointer over the text box and press the left mouse button, than right click and choose select all. For MAC user, place the mouse pointer over the text box and click the mouse, than press Command and 'A' at the same time on the keyboard to select all the text. Once all the text is selected, PC users right click the mouse button and choose copy, and MAC users press Command and 'C' at the same time on the keyboard.
Open your favorite text editor, like Notepad, and paste the text into the editor. Make sure Word Wrap is enabled in your text editor (In notepad Word Wrap is found under the Format menu). MAC users can use a program called TextEdit.
I inserted comments in the file that will provide you with instructions about what and how to edit the file. The comments are nested in between lines I created with the * symbol.
After your done editing the file, you will want to save the file as an html file. Most website hosts require the default webpage to be named index.html.
To save a file in Notepad, choose Save As.. under the file menu. In the "Save as Type" box, choose "All Files (*.*)", than type your file name and click save.
Once you have your saved file, your ready to upload the file to an online hosting company. There are several companies that offer free hosting. The website i chose to use is Biz.nf Web Hosting I chose this hosting company because they seemed more straight forward than the others, and it was fairly easy to setup. And there are no banner ads.
If you have questions or need help, than please visit thesmallengineshop.net online forum. You will also find instructions to help you configure your Biz.nf website to get your website up and running. Here is the link: For Help and for insturctions about how to configure Biz.nf website


						<!DOCTYPE html>
<html>
<head>

<!--***********************************************************************************
Change the title of your webpage, but don't change the <title> and </title> tags. Only
change what is found in between the title tags, which now says Jim's BMW & Japanese 
Motorcycle Repair.
************************************************************************************-->

<title>Jim's BMW & Japanese Motorcycle Repair</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
			background-color: #ffffff;
			}

			a {
				text-decoration: none;
				color: #1C72BB;
			}
				#wrapper 
						{
						width: 100%;
						margin: auto;
						border: solid;
						border-color: #0061B3;
						}

				#header {
					
					width: 100%;
					background-color: white;
					
						}

				#breaker 
						{
					width: 100%;
					height: 10px;
					background-color: #000080;
						}

				#main
						{
					background-color: white;
					width: 100%;
						}

				#mainbreak 
						{
					width: 100%;
					height: 5px;
					background-color: #000080;
						}

				#footer {
					background-color: white;
					width: 100%;
					
					text-align: center;
					clear: both;
						}

				.bmwicon 
						{
					display: block;
					margin-left: auto;
					margin-right: auto;

						}

				.facebookicon 	
						{
					height: 25px;
					width: 25px;
								
						}

				.lettericon 
						{	
					height: 25px;
					width: 25px;

						}

				h1		
						{
					font-size: 1.1em;
					text-align: center;
						}

				h2 		{
					text-align: center;
					font-size: 1.0em;
						}

				#mainimg 
						{
					width: 100px;
					height: 100px;
					border: solid;
					float: left;
					margin-right: 10px;		
						}

				.para 	{
					padding: 30px 10px 30px 10px;
						}

				#addy 	{
					text-align: center;
					padding-bottom: 20px;
						}






						@media screen and (min-width: 800px) {

							
								#wrapper 
										{
										width: 800px;
										margin: auto;
										border: solid;
										border-color: #0061B3;
										}

								#header {
									
									width: 800px;
									background-color: white;
									height: 150px;
										}

								#breaker 
										{
									width: 800px;
									height: 10px;
									background-color: #000080;
										}

								#main
										{
									background-color: white;
									width: 800px;
										}

								#mainbreak 
										{
									width: 800px;
									height: 5px;
									background-color: #000080;
										}

								#footer {
									background-color: white;
									width: 800px;
									height: 75px;
									text-align: center;
									clear: both;
										}

								.bmwicon 
										{
									float: left;
									margin-left: 20px;
										}

								.facebookicon 	
										{
									float: right;
									height: 25px;
									width: 25px;
									padding-right: 20px;
									position: relative;
									top: 20px;
										}

								.lettericon 
										{
									float: right;
									height: 25px;
									width: 25px;
									position: relative;
									top: 20px;
										}

								h1		
										{
									font-size: 1.5em;
									position: relative;
									top: 30px;
									left: 25px;
									text-align: left;
									text-shadow: 1px 1px 5px #BBB7B7;
										}

								h2 		{
									position: relative;
									left: 180px;
									top: 20px;
									text-align: left;
									font-size: 1.1em;
									text-shadow: 1px 1px 5px #BBB7B7;
										}

								#mainimg 
										{
									width: 100px;
									height: 100px;
									border: solid;
									float: left;
									margin-right: 10px;		
										}

								.para 	{
									padding: 30px 150px 30px 150px;
										}

								#addy 	{
									text-align: center;
									padding-bottom: 20px;
										}
						}

	</style>

</head>
<body>
<div id="wrapper">
		<div id="header">

		<!--**********************************************************************************
		Optional.
		The following <img> tag contains the location for the BMW icon. You can use this icon or
		you can change it. If you want to change the icon, than change the address found in the quotation marks after the src attribute. Be sure and leave the location inside of the quotation marks. The dimensions of this icon are 150 pixels by 150 pixels. The new icon
		should have the same dimensions or it will throw off the formatting.
		***********************************************************************************-->

		<img class="bmwicon" src="http://i1048.photobucket.com/albums/s362/joe80/bmwboxer4_zpse46461fd.png" >

		<!--**********************************************************************************
		Change the business name! 
		The following is the name of the business inside of the <h1> tags. Change this to your
		business name, but be sure your business name is inside of the <h1> tags, and don't 
		exceed the length of this name or it will throw off the page formatting.
		***********************************************************************************-->

		<h1>Jim's BMW & Japanese Motorcycle Repair</h1>

		<!--**********************************************************************************
		Change the telephone number inside of the <a> tag, and also inside the quotation marks
		of the href attribute.
		***********************************************************************************-->

		<h2><a href="tel:1-555-555-1212">1-555-555-1212</a></h2>
		
		<!--**********************************************************************************
		Change the facebook URL to match your facebook page location. The URL is inside the 
		<a> tag and is part of the href attribute inside of the quotation marks
		***********************************************************************************-->

		<a href="http://www.facebook.com">

		<!--**********************************************************************************
		Optional. This the location of the facebook icon and is the src attribue for the <img>
		tag. You are welcome to use this URL of change it to another one.
		***********************************************************************************-->

		<img class="facebookicon" src="http://i1048.photobucket.com/albums/s362/joe80/facebook_zps46a6a2be.png" style="border-style: none"/></a>

		<!--**********************************************************************************
		Change the email address in between the quotation marks of the href attribute of the
		<a> tag. Do not change the mailto: part. Only change the email address, which is 
		Jim@Jimsmotorcyclerepair.com.
		***********************************************************************************-->

		<a href="mailto:Jim@Jimsmotorcyclerepair.com" target="_top">

		<!--**********************************************************************************
		Optional. The location of the email icon is the src attribute for the <img> tag. You
		are welcome to use the URL or change it to another one.
		***********************************************************************************-->

		<img class="lettericon" src="http://i1048.photobucket.com/albums/s362/joe80/letter1_zps218924e0.png" style="border-style: none"/></a>
		</div>
		<div id="breaker"></div>
		<div id="main"><p class="para">

		<!--**********************************************************************************
		Optional. The URL for the src attribute for the <img> tag points the Honda XR100 
		picture. You are welcome to leave this alone and use the picture, or you can change
		it to your own. The dimensions for this photo are 100 pixels by 100 pixels
		************************************************************************************-->

		<img id="mainimg" src="http://i1048.photobucket.com/albums/s362/joe80/xr100_zps047df078.jpg">

		<!--***********************************************************************************
		Optional. This is the main text content. You can reuse this or change it. If you keep
		it, than you will want to change the parts where it mentions the business name
		************************************************************************************-->

		At Jim's BMW & Japanese Motorcycle Repair we care about your motorcycle, and we are commited to keeping your motorcycle on the road and out of the repair shop. At Jim's, all motorcycle technicians are manufacture certified, and our shop facility utilizes the most modern and up to date equipment to keep your motorcycle in top shape. We cover everything from your basic oil change to high performance engine calibration, tuning and rebuilds. Everything at Jim's BMW & Japanese Motorcycle Repair is focused on keeping your motorcycle on the road and running at peak performance.<br><br>Please feel free to contact us anytime, and be sure to visit us on facebook for motorcycle riding and maintenance tips, and special offers on your next service.<br><br>Thank You from everyone at Jim's</p>

		<!--***********************************************************************************
		Change. In between the <p> tag you want to change the business name, address, telephone,
		and email address. Changes for the telephone and email address are the same as you did
		previously. The <br> tag is a line break, and they are found after each line except
		the last. Be sure and don't remove the <br> tags
		************************************************************************************-->

			<p id="addy">Jim's BMW & Japanese Motorcycle Repair<br>
				PO BOX 1212<br>
				Seattle, WA 98101<br>
				<a href="tel:1-555-555-1212">1-555-555-1212</a><br>
				<a href="mailto:Jim@Jimsmotorcyclerepair.com" target="_top">email</a></p>
			</div>
		<div id="mainbreak"></div>
		<div id="footer"><br>

		<!--***********************************************************************************
		Change. In between the <script> tags is javascript used to display the current year. After the </script> tag is the name of the business. You want to change the business
		name to match your own
		************************************************************************************-->

		©<script type="text/javascript">
				var currentTime = new Date();
				var year = currentTime.getFullYear();
				document.write(year);
				</script> Jim's BMW & Japanese Motorcycle Repair
		

		</div>
</div>



</body>
</html>