Advanced Search

HTML/CSS Template - HTML 4 Transitional

/ Published in: HTML
Save to your folder(s)
HTML/CSS Template - HTML 4 Transitional

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  
  3.             "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <html>
  6.  
  7.  
  8.  
  9. <head>
  10.  
  11. 	<title>HTML 4.01 Transitional</title>
  12.  
  13. 	<meta http-equiv="content-type" content="text/html;charset=utf-8">
  14.  
  15. 	<meta http-equiv="Content-Style-Type" content="text/css">
  16.  
  17.  
  18.  
  19. <style type="text/css">
  20.  
  21.  
  22.  
  23. 	html,body {
  24.  
  25. 		background-color: #eae8db;
  26.  
  27. 		background-image: url();
  28.  
  29. 		background-attachment: fixed;
  30.  
  31. 		background-position: top;
  32.  
  33. 		background-repeat: no-repeat;
  34.  
  35. 		text-align: center; /* for center aligned sites in IE */
  36.  
  37. 	/* body font styles */
  38.  
  39. 		font-family: Arial, Helvetica, sans-serif;
  40.  
  41. 		font-style: normal;
  42.  
  43. 		font-variant: normal;
  44.  
  45. 		font-weight: normal;
  46.  
  47. 		color: #000;
  48.  
  49. 		text-decoration: none;
  50.  
  51. 	}
  52.  
  53.  
  54.  
  55. 	body { font-size: 76%; }
  56.  
  57. 	html { font-size: 100%; /* IE hack */ }
  58.  
  59. 	*{ margin: 0; padding: 0; }
  60.  
  61. 	img { border: none; }
  62.  
  63. 	div.clear { clear: both; height: 0;}
  64.  
  65.  
  66.  
  67. 		/* START: Page Formatting ------------------ */
  68.  
  69.  
  70.  
  71.  
  72.  
  73. 	div#pageContainer {
  74.  
  75. 		width: 800px;
  76.  
  77. 		margin: 0 auto;
  78.  
  79. 		background-color: #FFF;
  80.  
  81. 		text-align: left;
  82.  
  83. 		border-left: 1px solid #cac7b9;
  84.  
  85. 		border-right: 1px solid #cac7b9;
  86.  
  87. 	}
  88.  
  89.  
  90.  
  91.  
  92.  
  93. 	div#pageFooter {
  94.  
  95. 		width: 100%;
  96.  
  97. 		background-color: #3e4247;
  98.  
  99. 		border-top: 1px solid #0099ff;
  100.  
  101. 		text-align: left;
  102.  
  103. 		margin: 0 auto;
  104.  
  105. 	}
  106.  
  107.  
  108.  
  109. 		/* START: Font Styles ------------------ */
  110.  
  111.  
  112.  
  113.  
  114.  
  115. 	/* Headers */
  116.  
  117.  
  118.  
  119. 	h1 { font-size: 1.8em; font-weight: bold; color: #330000; }
  120.  
  121.  
  122.  
  123. 	h2 { font-size: 1.6em; font-weight: bold; color: #660000; }
  124.  
  125.  
  126.  
  127. 	h3 { font-size: 1.4em; font-weight: bold; color: #990000; }
  128.  
  129.  
  130.  
  131. 	h4 { font-size: 1.2em; font-weight: bold; color: #CC0000; }
  132.  
  133.  
  134.  
  135. 	h5 { font-size: 1.1em; font-weight: bold; color: #FF0000; }
  136.  
  137.  
  138.  
  139. 	h1.hamiltopia {
  140.  
  141. 		font-size: 8em;
  142.  
  143. 		font-weight: bold;
  144.  
  145. 		letter-spacing: -1.2em;
  146.  
  147. 		color: #D3D3D3;
  148.  
  149. 		font-family: Verdana;/* "Lucida Sans" */
  150.  
  151. 	}
  152.  
  153.  
  154.  
  155. 	/* Text */
  156.  
  157.  
  158.  
  159. 	p { font-size: 1.1em; line-height: 1.5; color: #333; }
  160.  
  161.  
  162.  
  163.  
  164.  
  165. 	/* Links */
  166.  
  167.  
  168.  
  169. 	/* this is a link OUTSIDE of a <P> */
  170.  
  171. 	a:link, a:active, a:visited { font-size: 1.1em; color: #003399; text-decoration: none; }
  172.  
  173. 	a:hover { color: #CC0000; text-decoration: underline; }
  174.  
  175.  
  176.  
  177.  
  178.  
  179. 	/* this is a link INSIDE of a <P> */
  180.  
  181. 	p a:link, p a:active, p a:visited { font-size: 1em; font-weight: bold; color: #336699; text-decoration: none; }
  182.  
  183. 	p a:hover { color: #CC0000; text-decoration: underline; background: #E3E3E3; }
  184.  
  185.  
  186.  
  187.  
  188.  
  189. 	/* Lists */
  190.  
  191.  
  192.  
  193. 	ul { list-style-type: none;}
  194.  
  195.  
  196.  
  197.  
  198.  
  199. 	/* Forms */
  200.  
  201.  
  202.  
  203.  
  204.  
  205. 		/* END: Font Styles ------------------ */
  206.  
  207.  
  208.  
  209.  
  210.  
  211. 	div#newsBoxHome {
  212.  
  213. 		width: 300px;
  214.  
  215. 		margin: 0; padding: 0;
  216.  
  217. 		background: #999 url() no-repeat bottom;
  218.  
  219. 	}
  220.  
  221.  
  222.  
  223. 	div#newsBoxHome span {
  224.  
  225. 		display: block;
  226.  
  227. 		width: 90%;
  228.  
  229. 		margin: 0 5%; padding: 5% 0;
  230.  
  231. 		background: transparent;
  232.  
  233. 	}
  234.  
  235.  
  236.  
  237. 		/* START: Font Styles ------------------ */
  238.  
  239.  
  240.  
  241. 	ul#formList {
  242.  
  243. 		list-style-type: none;
  244.  
  245. 		width: 300px;
  246.  
  247. 	}
  248.  
  249.  
  250.  
  251. 	ul#formList li {
  252.  
  253. 		display: block;
  254.  
  255. 		width: 300px;
  256.  
  257. 		padding: 10px 0;
  258.  
  259. 		border-bottom: 1px solid #CCC;
  260.  
  261. 	}
  262.  
  263.  
  264.  
  265. 	ul#formList li br {
  266.  
  267. 		clear: both;
  268.  
  269. 		height: 0;
  270.  
  271. 	}
  272.  
  273.  
  274.  
  275. 	form#quickForm {
  276.  
  277. 		display: inline;
  278.  
  279. 		width: 300px;
  280.  
  281. 	}
  282.  
  283.  
  284.  
  285. 	form#quickForm label {
  286.  
  287. 		float: left;
  288.  
  289. 		font-size: 1.2em;
  290.  
  291. 		font-weight: bold;
  292.  
  293. 		color: #CC0000;
  294.  
  295. 		text-decoration: none;
  296.  
  297. 	}
  298.  
  299.  
  300.  
  301. 	form#quickForm input.textField, form#quickForm select.selectList {
  302.  
  303. 		display: block;
  304.  
  305. 		float: right;
  306.  
  307. 		text-align: left;
  308.  
  309. 		width: 150px;
  310.  
  311. 		border: 1px solid #666;
  312.  
  313. 		background-color: #FFF;
  314.  
  315. 		font-size: 1em;
  316.  
  317. 		font-weight: bold;
  318.  
  319. 		color: #336699;
  320.  
  321. 	}
  322.  
  323.  
  324.  
  325. 	form#quickForm textarea.textArea {
  326.  
  327. 		display: block;
  328.  
  329. 		float: right;
  330.  
  331. 		text-align: left;
  332.  
  333. 		width: 150px;
  334.  
  335. 		height: 150px;
  336.  
  337. 		border: 1px solid #666;
  338.  
  339. 		background-color: #FFF;
  340.  
  341. 		font-size: 1em;
  342.  
  343. 		font-weight: bold;
  344.  
  345. 		color: #336699;
  346.  
  347. 		overflow: auto;
  348.  
  349. 	}
  350.  
  351.  
  352.  
  353. 	.formSubmit {
  354.  
  355. 		display: block;
  356.  
  357. 		float: right;
  358.  
  359. 		width: 150px;
  360.  
  361. 		border: 1px solid #666;
  362.  
  363. 		background-color: #FFF;
  364.  
  365. 		font-size: 1em;
  366.  
  367. 		font-weight: bold;
  368.  
  369. 		color: #336699;
  370.  
  371. 		padding: 0;
  372.  
  373. 	}
  374.  
  375.  
  376.  
  377. 		/* END: Font Styles ------------------ */
  378.  
  379. </style>
  380.  
  381.  
  382.  
  383.  
  384.  
  385. </head>
  386.  
  387.  
  388.  
  389. <body>
  390.  
  391.  
  392.  
  393. <div id="pageContainer"><!-- START: main content holder - this holds everything -->
  394.  
  395.  
  396.  
  397. 		<h1 class="hamiltopia">hamiltopia</h1>
  398.  
  399.  
  400.  
  401. 		<h1>This is an H1 tag</h1>
  402.  
  403.  
  404.  
  405. 		<h2>This is an H2 tag</h2>
  406.  
  407.  
  408.  
  409. 		<h3>This is an H3 tag</h3>
  410.  
  411.  
  412.  
  413. 		<h4>This is an H4 tag</h4>
  414.  
  415.  
  416.  
  417. 		<h5>This is an H5 tag</h5>
  418.  
  419.  
  420.  
  421.  
  422.  
  423. 		<p>
  424.  
  425. 			This ia paragraph text cum soluta nobis <a href="#" title="Title Tag">eleifend</a> option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  426.  
  427. 		</p>
  428.  
  429.  
  430.  
  431.  
  432.  
  433. 		<a href="#" title="Title Tag">Link Item One</a><br>
  434.  
  435.  
  436.  
  437.  
  438.  
  439. 		<img src="imgs/jeep.jpg" alt="ALT Tag" width="275" height="190" border="0" title="Title Tag"><br>
  440.  
  441.  
  442.  
  443. 		<ul>
  444.  
  445. 			<li>List Item</li>
  446.  
  447. 			<li>List Item</li>
  448.  
  449. 			<li>List Item</li>
  450.  
  451. 			<li>List Item</li>
  452.  
  453. 			<li>List Item</li>
  454.  
  455. 		</ul>
  456.  
  457.  
  458.  
  459.  
  460.  
  461. 		<div id="newsBoxHome">
  462.  
  463. 			<span>
  464.  
  465.  
  466.  
  467. 				<h3>This is an H3 tag</h3>
  468.  
  469.  
  470.  
  471. 				<p>
  472.  
  473. 					This ia paragraph text cum soluta nobis <a href="#" title="Title Tag">eleifend</a> option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  474.  
  475. 				</p>
  476.  
  477.  
  478.  
  479. 			</span>
  480.  
  481. 		</div>
  482.  
  483.  
  484.  
  485. 		<form action="" name="quickForm" id="quickForm">
  486.  
  487. 			<ul id="formList">
  488.  
  489. 				<li>
  490.  
  491. 					 <label for="name">Name</label><input type="text" name="name" id="name" class="textField">
  492.  
  493. 					 <br>
  494.  
  495. 				</li>
  496.  
  497. 				<li>
  498.  
  499. 					<label for="address">Address</label><input type="text" name="address" id="address" class="textField">
  500.  
  501. 					<br>
  502.  
  503. 				</li>
  504.  
  505. 				<li>
  506.  
  507. 					 <label for="city">City</label><input type="text" name="city" id="city" class="textField">
  508.  
  509. 					 <br>
  510.  
  511. 				</li>
  512.  
  513. 				<li>
  514.  
  515. 					<label for="state">State</label>
  516.  
  517. 					<select name="state" class="selectList">
  518.  
  519. 						<option value="" selected="selected">Select a State</option>
  520.  
  521. 						<option value="AL">Alabama</option> 
  522.  
  523. 						<option value="AK">Alaska</option> 
  524.  
  525. 						<option value="AZ">Arizona</option> 
  526.  
  527. 						<option value="AR">Arkansas</option> 
  528.  
  529. 						<option value="CA">California</option> 
  530.  
  531. 						<option value="CO">Colorado</option> 
  532.  
  533. 						<option value="CT">Connecticut</option> 
  534.  
  535. 						<option value="DE">Delaware</option> 
  536.  
  537. 						<option value="DC">District Of Columbia</option> 
  538.  
  539. 						<option value="FL">Florida</option> 
  540.  
  541. 						<option value="GA">Georgia</option> 
  542.  
  543. 						<option value="HI">Hawaii</option> 
  544.  
  545. 						<option value="ID">Idaho</option> 
  546.  
  547. 						<option value="IL">Illinois</option> 
  548.  
  549. 						<option value="IN">Indiana</option> 
  550.  
  551. 						<option value="IA">Iowa</option> 
  552.  
  553. 						<option value="KS">Kansas</option> 
  554.  
  555. 						<option value="KY">Kentucky</option> 
  556.  
  557. 						<option value="LA">Louisiana</option> 
  558.  
  559. 						<option value="ME">Maine</option> 
  560.  
  561. 						<option value="MD">Maryland</option> 
  562.  
  563. 						<option value="MA">Massachusetts</option> 
  564.  
  565. 						<option value="MI">Michigan</option> 
  566.  
  567. 						<option value="MN">Minnesota</option> 
  568.  
  569. 						<option value="MS">Mississippi</option> 
  570.  
  571. 						<option value="MO">Missouri</option> 
  572.  
  573. 						<option value="MT">Montana</option> 
  574.  
  575. 						<option value="NE">Nebraska</option> 
  576.  
  577. 						<option value="NV">Nevada</option> 
  578.  
  579. 						<option value="NH">New Hampshire</option> 
  580.  
  581. 						<option value="NJ">New Jersey</option> 
  582.  
  583. 						<option value="NM">New Mexico</option> 
  584.  
  585. 						<option value="NY">New York</option> 
  586.  
  587. 						<option value="NC">North Carolina</option> 
  588.  
  589. 						<option value="ND">North Dakota</option> 
  590.  
  591. 						<option value="OH">Ohio</option> 
  592.  
  593. 						<option value="OK">Oklahoma</option> 
  594.  
  595. 						<option value="OR">Oregon</option> 
  596.  
  597. 						<option value="PA">Pennsylvania</option> 
  598.  
  599. 						<option value="RI">Rhode Island</option> 
  600.  
  601. 						<option value="SC">South Carolina</option> 
  602.  
  603. 						<option value="SD">South Dakota</option> 
  604.  
  605. 						<option value="TN">Tennessee</option> 
  606.  
  607. 						<option value="TX">Texas</option> 
  608.  
  609. 						<option value="UT">Utah</option> 
  610.  
  611. 						<option value="VT">Vermont</option> 
  612.  
  613. 						<option value="VA">Virginia</option> 
  614.  
  615. 						<option value="WA">Washington</option> 
  616.  
  617. 						<option value="WV">West Virginia</option> 
  618.  
  619. 						<option value="WI">Wisconsin</option> 
  620.  
  621. 						<option value="WY">Wyoming</option>
  622.  
  623. 					</select>
  624.  
  625. 					<br>
  626.  
  627. 				</li>
  628.  
  629. 				<li>
  630.  
  631. 					 <label for="comment">Comment</label><textarea cols="" rows="" name="comment" id="comment" class="textArea"></textarea>
  632.  
  633. 					 <br>
  634.  
  635. 				</li>
  636.  
  637. 				<li>
  638.  
  639. 					<input type="submit" name="Submit" value="Submit" class="formSubmit">
  640.  
  641. 					<br>
  642.  
  643. 				</li>
  644.  
  645. 			</ul>
  646.  
  647. 		</form>
  648.  
  649.  
  650.  
  651.  
  652.  
  653.  
  654.  
  655. </div><!-- END: main content holder -->
  656.  
  657.  
  658.  
  659.  
  660.  
  661. <div id="pageFooter"><!-- START: page footer -->
  662.  
  663.  
  664.  
  665. <br><br><br><br><br>
  666.  
  667.  
  668.  
  669. </div><!-- END: page footer  -->
  670.  
  671.  
  672.  
  673. </body>
  674.  
  675. </html>

URL: hamiltopia_HtmlCssTemplate

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.