Reply to thread

Message

<blockquote data-quote="BR4DLEY" data-source="post: 298327" data-attributes="member: 10966">Hey There DevBest,Well Basically my Internet was offline fora bit and I got, So I was thinking about doing some HTML and CSS Designs, I have started a few, But this was the only basic one I have finished right now, I know it isn't much and it looks pretty untidy, But in my opinion it could be good to practise HTML and CSS on,But anyway here are some Screenshots!Screenshot 1:<img src="http://s28.postimg.org/oqojjqrj1/demo2.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Screenshot 2:<img src="http://s15.postimg.org/3nn63ylbv/demo3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Screenshot 3:<img src="http://s22.postimg.org/4s6iqx8dt/demo1.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Screenshot 4:<img src="http://s9.postimg.org/zen5g0aa7/demo4.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Thanks for reading, Like I said its basic but I gave it a shot <img src="/styles/default/xenforo/smilies/emojione/smile.png"&nbsp; class="smilie" loading="lazy" alt=":)" title="Smile&nbsp; &nbsp; :)" data-shortname=":)" />EDIT:HTML Code[CODE]&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;images/BradCSS.css&quot; type=&quot;text/css&quot; /&gt;&lt;title&gt;Basica - By Bradley Stokes&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;wrap&quot;&gt;&nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &lt;h1 id=&quot;logo&quot;&gt;&lt;font color=&quot;orange&quot;&gt; Basica!&lt;/h1&gt;&nbsp; &nbsp; &lt;h2 id=&quot;slogan&quot;&gt;&lt;font color=&quot;blue&quot;&gt;Your &lt;font color=&quot;red&quot;&gt;website &lt;font color=&quot;green&quot;&gt;slogan...&lt;/h2&gt;&nbsp; &nbsp; &lt;div id=&quot;menu&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;current&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Suggestions&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;div id=&quot;content-wrap&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;sidebar&quot; &gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;&lt;strong&gt;Other Links&lt;/strong&gt;&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &lt;ul class=&quot;sidemenu&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;font color=&quot;orange&quot;&gt;Link1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;font color=&quot;orange&quot;&gt;Link2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;font color=&quot;orange&quot;&gt;Link3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;&lt;strong&gt;Server Information:&lt;/strong&gt;&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;orange&quot;&gt;&lt;strong&gt;Version:&lt;/strong&gt; v0.1&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;orange&quot;&gt;&lt;strong&gt;Creator:&lt;/strong&gt; Bradley Stokes&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt; &lt;a name=&quot;NewsBox&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;&lt;strong&gt;A Small Introduction&lt;/span&gt;&lt;/strong&gt;&lt;/h1&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;white&quot;&gt;This is a free Website template Created by &lt;strong&gt;Bradley Stokes&lt;/strong&gt;, I am a 14 Year old Student from London and I am currently learning how to develop, This is a basic template i would like to release to the public, So if possible please could you give me some feed back at my website &lt;a href=&quot;http://www.bradleystokes.url.ph&quot;&gt;&lt;strong&gt;Click Me&lt;/strong&gt;&lt;/a&gt;, Thank you for checking out my &lt;strong&gt;Basica&lt;/strong&gt; Template! If you would like to request a template you could also submit one at my website, This website took 61 Lines of HTML to create and 314 lines of CSS code&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt; &lt;a name=&quot;NewsBox&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;Place Holder!&lt;/h1&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;white&quot;&gt;This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code!&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt; &lt;a name=&quot;NewsBox&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;Place Holder!&lt;/h1&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;white&quot;&gt;This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code!&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt; &lt;a name=&quot;NewsBox&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;Place Holder!&lt;/h1&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;white&quot;&gt;This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code!&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt; &lt;a name=&quot;NewsBox&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;&lt;font color=&quot;orange&quot;&gt;Place Holder!&lt;/h1&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;&lt;font color=&quot;white&quot;&gt;This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code!&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/body&gt;&nbsp; &nbsp; &nbsp; &lt;br&gt;&nbsp; &nbsp; &nbsp; &lt;br&gt;&nbsp; &nbsp; &nbsp; &lt;br&gt;&nbsp; &nbsp; &nbsp; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt;&nbsp; &nbsp; &nbsp; &lt;blockquote&gt;&nbsp; &nbsp; &nbsp; &lt;footer&gt;&lt;font color=&quot;orange&quot;&gt;Copyright© 2014 &lt;font color=&quot;black&quot;&gt;| &lt;font color=&quot;orange&quot;&gt;yourdomain.com &lt;font color=&quot;black&quot;&gt;| &lt;font color=&quot;orange&quot;&gt;Design by &lt;font color=&quot;black&quot;&gt; -&lt;a href=&quot;http://www.bradleystokes.tk/&quot;&gt;&lt;font color=&quot;teal&quot;&gt; Bradley Stokes&lt;/a&gt;&lt;/footer&gt;&nbsp; &nbsp; &nbsp; &lt;/blockquote&gt;&lt;/html&gt;[/CODE]CSS Code:[CODE]/********************************************&nbsp;&nbsp; AUTHOR:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bradley Stokes&nbsp;&nbsp; WEBSITE:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #&nbsp; &nbsp; CSS NAME:&nbsp; &nbsp;&nbsp; Legits Coding&nbsp;&nbsp; CSS CODE:&nbsp; &nbsp;&nbsp; S-0008&nbsp;&nbsp; VERSION:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *******************************************//********************************************&nbsp;&nbsp; HTML ELEMENTS********************************************//* top elements */* {&nbsp; &nbsp; padding: 0; margin: 0;}body {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp;&nbsp; padding: 0;&nbsp; &nbsp; font: normal .70em/1.6em Verdana, Tahoma, sans-serif;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; background: #FFFFF;&nbsp; &nbsp; text-align: center; }/* links */a {&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; background-color: inherit;&nbsp; &nbsp; text-decoration: none;}a:hover {&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; background-color: inherit; &nbsp; &nbsp; text-decoration: underline;}/* headers */h1, h2, h3 {&nbsp; &nbsp; font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;&nbsp; &nbsp; color: #FFF; }h1 { font-size: 1.6em; }h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;}h3 { font-size: 1.3em; font-weight: bold; }p, h1, h2, h3 {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 10px 15px;}ul, ol {&nbsp; &nbsp; margin: 10px 30px;&nbsp; &nbsp; padding: 0 15px;&nbsp; &nbsp; color: #FFF;}/* images */img {&nbsp; &nbsp; border: 3px solid #555;}img.no-border {&nbsp; &nbsp; border: none;}img.float-right {&nbsp; margin: 5px 0px 5px 15px;}img.float-left {&nbsp; margin: 5px 15px 5px 0px;}a img {&nbsp; border: 3px solid #555;}a:hover img {&nbsp; border: 3px solid #CCC !important; /* IE fix*/&nbsp; border: 3px solid #555;}code {&nbsp; margin: 5px 0;&nbsp; padding: 10px;&nbsp; text-align: left;&nbsp; display: block;&nbsp; overflow: auto;&nbsp; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;&nbsp; /* white-space: pre; */&nbsp; background: #0A1646;}acronym {&nbsp; cursor: help;&nbsp; border-bottom: 1px solid #777;}blockquote {&nbsp; &nbsp; margin: 15px;&nbsp; &nbsp;&nbsp; padding: 0 0 0 20px;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; background: #FFFFF; &nbsp; &nbsp; font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;}/* form elements */form {&nbsp; &nbsp; margin: 10px 15px;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; background: #0A1646; }label {&nbsp; &nbsp; display:block;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; margin:5px 0;}input {&nbsp; &nbsp; padding: 2px;&nbsp; &nbsp; border:1px solid #eee;&nbsp; &nbsp; font: normal 1em Verdana, sans-serif;&nbsp; &nbsp; color:#777;}textarea {&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; padding:2px;&nbsp; &nbsp; font: normal 1em Verdana, sans-serif;&nbsp; &nbsp; border:1px solid #eee;&nbsp; &nbsp; height:100px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; color:#777;}input.button {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; font: bold 1em Arial, Sans-serif;&nbsp; &nbsp; border: 1px solid #CCC;&nbsp; &nbsp; background: #FFF;&nbsp; &nbsp; padding: 2px 3px;&nbsp; &nbsp; color: #333; }/* search form */.searchform form{&nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; border: none;&nbsp; &nbsp; margin: 0; padding: 0;}.searchform input.textbox {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; width: 145px;&nbsp; &nbsp; border: 1px solid #777;&nbsp; &nbsp; background: #FFF;&nbsp; &nbsp; color: #333;&nbsp; &nbsp; height: 14px;&nbsp; &nbsp; vertical-align: top;}.searchform input.button {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 2px 3px;&nbsp; &nbsp; font: bold 12px Arial, Sans-serif;&nbsp; &nbsp; background: #FFF;&nbsp; &nbsp; border: 1px solid #f2f2f2;&nbsp; &nbsp; color: #333; &nbsp; &nbsp; width: 65px;&nbsp; &nbsp; vertical-align: top;}/***********************&nbsp; &nbsp; &nbsp; LAYOUT************************/#wrap {&nbsp; &nbsp; background: #212B5C url(bg.jpg) repeat-x 0 0;&nbsp; &nbsp; margin: 20px auto 0 auto; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; border-color: #444;&nbsp; &nbsp; border-style: solid;&nbsp; &nbsp; border-width: 1px 1px 5px 1px; } #wrap, #footer-wrap {&nbsp; &nbsp; width: 90%;}/* header */#header {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 110px; &nbsp; &nbsp; background: #7F8082 url(header-bg.jpg) repeat-x 0% 100%;&nbsp; &nbsp; border-bottom: 5px solid #444;&nbsp; &nbsp;&nbsp; }#header h1#logo {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 5px; left: 20px;&nbsp; &nbsp; margin: 0; padding: 0;&nbsp; &nbsp; font: bolder 50px 'Trebuchet MS', Arial, Sans-serif;&nbsp; &nbsp; letter-spacing: -2px; }#header h2#slogan {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50px; left: 65px;&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; text-indent: 0px;&nbsp; &nbsp; font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif;&nbsp; &nbsp; text-transform: none; }/* content-wrap */#content-wrap {&nbsp; &nbsp; clear: both;&nbsp; &nbsp; margin: 0; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }/* box */.box {&nbsp; &nbsp; margin: 10px 15px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; border: 1px solid #0A1646;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #1B2455; }/* main */#main {&nbsp; &nbsp; margin: 0 0 0 270px;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; padding-top: 20px;}#main .box {&nbsp; &nbsp; margin-left: 0;}/* sidebar */#sidebar {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding-top: 20px;&nbsp; }#sidebar ul.sidemenu {&nbsp; &nbsp; margin: 0 0 0 15px; padding: 0; &nbsp; &nbsp; background: #242424;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; border-top: 5px solid #444;}#sidebar ul.sidemenu li {&nbsp; &nbsp; display: inline;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp;&nbsp; }#sidebar ul.sidemenu li a {&nbsp; display: block; &nbsp; padding: 5px 10px 5px 15px;&nbsp; text-decoration: none;&nbsp; color: #CCC;&nbsp; font-weight: bold;}#sidebar ul.sidemenu li a:hover {&nbsp; color: #333;&nbsp; background: #60F456;}/* Footer */#footer-wrap {&nbsp; &nbsp; clear: both;&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; background: #000;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; font-size: 1%;&nbsp; &nbsp; &nbsp;&nbsp; }#footer-wrap a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; color: #FFF;}#footer-wrap .footer-left{&nbsp; &nbsp; float: center;&nbsp; &nbsp; width: 65%; &nbsp; &nbsp; padding-bottom: 20px; }#footer-wrap .footer-right{&nbsp; &nbsp; float: center;&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; padding-bottom: 20px;}/* menu tabs */#header ul {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 20px; right: 20px;&nbsp; &nbsp; margin:0; padding: 0;&nbsp;&nbsp; list-style:none;&nbsp; &nbsp; font: bold 1.3em&nbsp; 'Trebuchet MS', Tahoma, verdana,&nbsp; sans-serif; &nbsp; &nbsp; height: 2.3em;}#header li {&nbsp;&nbsp; display:inline;&nbsp;&nbsp; margin:0; padding:0;}#header a {&nbsp; &nbsp; float: left;&nbsp;&nbsp; margin:0;&nbsp;&nbsp; padding:3px 10px 2px 10px;&nbsp;&nbsp; text-decoration:none; &nbsp; &nbsp; color: #CCC;}#header a:hover {&nbsp; &nbsp; border-top: 5px solid #CCC; }#header #current a {&nbsp;&nbsp; color: #FFF;&nbsp; &nbsp; border-top: 5px solid #FFF;}/* end menu tabs *//* alignment classes */.float-left&nbsp; { float: left; }.float-right {&nbsp; &nbsp; float: right; }.align-left&nbsp; {&nbsp; &nbsp; text-align: left; }.align-right {&nbsp; &nbsp; text-align: right; }/* additional classes */.clear {&nbsp; &nbsp; clear: both; }.gray&nbsp; {&nbsp; &nbsp; color: #A0A0A0; }.comments {&nbsp; &nbsp; text-align: right;&nbsp; &nbsp; padding: 7px 15px;&nbsp; &nbsp; margin: 20px 15px 15px 15px;&nbsp; &nbsp; background: #0A1646;&nbsp; }[/CODE]Download Link: <a href="http://www.mediafire.com/download/6fb1xajuf8bn7b6/Basica+-+Bradley+Stokes.zip" target="_blank">http://www.mediafire.com/download/6fb1xajuf8bn7b6/Basica+-+Bradley+Stokes.zip</a></blockquote>

[QUOTE="BR4DLEY, post: 298327, member: 10966"] Hey There DevBest, Well Basically my Internet was offline fora bit and I got, So I was thinking about doing some HTML and CSS Designs, I have started a few, But this was the only basic one I have finished right now, I know it isn't much and it looks pretty untidy, But in my opinion it could be good to practise HTML and CSS on, But anyway here are some Screenshots! Screenshot 1: [IMG]http://s28.postimg.org/oqojjqrj1/demo2.png[/IMG] Screenshot 2: [IMG]http://s15.postimg.org/3nn63ylbv/demo3.png[/IMG] Screenshot 3: [IMG]http://s22.postimg.org/4s6iqx8dt/demo1.png[/IMG] Screenshot 4: [IMG]http://s9.postimg.org/zen5g0aa7/demo4.png[/IMG] Thanks for reading, Like I said its basic but I gave it a shot :) EDIT: HTML Code [CODE]<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="images/BradCSS.css" type="text/css" /> <title>Basica - By Bradley Stokes</title> </head> <body> <div id="wrap"> <div id="header"> <h1 id="logo"> Basica!</h1> <h2 id="slogan">Your website slogan...</h2> <div id="menu"> <ul> <li id="current"><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Suggestions</a></li> </ul> </div> </div> <div id="content-wrap"> <div id="sidebar" > <h1>Other Links</h1> <ul class="sidemenu"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> <h1>Server Information:</h1> Version: v0.1 Creator: Bradley Stokes </div> <div id="main"> <a name="NewsBox"></a> <h1>A Small Introduction</h1> This is a free Website template Created by Bradley Stokes, I am a 14 Year old Student from London and I am currently learning how to develop, This is a basic template i would like to release to the public, So if possible please could you give me some feed back at my website <a href="http://www.bradleystokes.url.ph">Click Me</a>, Thank you for checking out my Basica Template! If you would like to request a template you could also submit one at my website, This website took 61 Lines of HTML to create and 314 lines of CSS code </div> <div id="main"> <a name="NewsBox"></a> <h1>Place Holder!</h1> This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code! </div> <div id="main"> <a name="NewsBox"></a> <h1>Place Holder!</h1> This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code! </div> <div id="main"> <a name="NewsBox"></a> <h1>Place Holder!</h1> This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code! </div> <div id="main"> <a name="NewsBox"></a> <h1>Place Holder!</h1> This is a Place Holder, Put any Type of Text here or remove it by simply deleting the Html Code! </div> </body> <blockquote> <footer>Copyright© 2014 | yourdomain.com | Design by -<a href="http://www.bradleystokes.tk/"> Bradley Stokes</a></footer> </blockquote> </html>[/CODE] CSS Code: [CODE]/******************************************** AUTHOR: Bradley Stokes WEBSITE: # CSS NAME: Legits Coding CSS CODE: S-0008 VERSION: 0.4 *******************************************/ /******************************************** HTML ELEMENTS ********************************************/ /* top elements */ * { padding: 0; margin: 0; } body { margin: 0; padding: 0; font: normal .70em/1.6em Verdana, Tahoma, sans-serif; color: #BDBDBD; background: #FFFFF; text-align: center; } /* links */ a { color: #FFF; background-color: inherit; text-decoration: none; } a:hover { color: #FFF; background-color: inherit; text-decoration: underline; } /* headers */ h1, h2, h3 { font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif; color: #FFF; } h1 { font-size: 1.6em; } h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;} h3 { font-size: 1.3em; font-weight: bold; } p, h1, h2, h3 { margin: 0; padding: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; color: #FFF; } /* images */ img { border: 3px solid #555; } img.no-border { border: none; } img.float-right { margin: 5px 0px 5px 15px; } img.float-left { margin: 5px 15px 5px 0px; } a img { border: 3px solid #555; } a:hover img { border: 3px solid #CCC !important; /* IE fix*/ border: 3px solid #555; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; /* white-space: pre; */ background: #0A1646; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 15px; padding: 0 0 0 20px; background: #FFFFF; font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif; } /* form elements */ form { margin: 10px 15px; padding: 0; background: #0A1646; } label { display:block; font-weight:bold; margin:5px 0; } input { padding: 2px; border:1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width: 250px; padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #eee; height:100px; display:block; color:#777; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #CCC; background: #FFF; padding: 2px 3px; color: #333; } /* search form */ .searchform form{ background-color: transparent; border: none; margin: 0; padding: 0; } .searchform input.textbox { margin: 0; width: 145px; border: 1px solid #777; background: #FFF; color: #333; height: 14px; vertical-align: top; } .searchform input.button { margin: 0; padding: 2px 3px; font: bold 12px Arial, Sans-serif; background: #FFF; border: 1px solid #f2f2f2; color: #333; width: 65px; vertical-align: top; } /*********************** LAYOUT ************************/ #wrap { background: #212B5C url(bg.jpg) repeat-x 0 0; margin: 20px auto 0 auto; text-align: left; border-color: #444; border-style: solid; border-width: 1px 1px 5px 1px; } #wrap, #footer-wrap { width: 90%; } /* header */ #header { position: relative; height: 110px; background: #7F8082 url(header-bg.jpg) repeat-x 0% 100%; border-bottom: 5px solid #444; } #header h1#logo { position: absolute; top: 5px; left: 20px; margin: 0; padding: 0; font: bolder 50px 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; } #header h2#slogan { position: absolute; top: 50px; left: 65px; color: #FFF; text-indent: 0px; font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif; text-transform: none; } /* content-wrap */ #content-wrap { clear: both; margin: 0; padding: 0; } /* box */ .box { margin: 10px 15px; border: 1px solid #0A1646; background-color: #1B2455; } /* main */ #main { margin: 0 0 0 270px; padding-top: 20px; } #main .box { margin-left: 0; } /* sidebar */ #sidebar { float: left; width: 250px; margin: 0; padding-top: 20px; } #sidebar ul.sidemenu { margin: 0 0 0 15px; padding: 0; background: #242424; border-top: 5px solid #444; } #sidebar ul.sidemenu li { display: inline; list-style: none; } #sidebar ul.sidemenu li a { display: block; padding: 5px 10px 5px 15px; text-decoration: none; color: #CCC; font-weight: bold; } #sidebar ul.sidemenu li a:hover { color: #333; background: #60F456; } /* Footer */ #footer-wrap { clear: both; color: #FFF; background: #000; margin: 0 auto; padding: 0; font-size: 1%; } #footer-wrap a { text-decoration: none; font-weight: bold; color: #FFF; } #footer-wrap .footer-left{ float: center; width: 65%; padding-bottom: 20px; } #footer-wrap .footer-right{ float: center; width: 30%; padding-bottom: 20px; } /* menu tabs */ #header ul { position: absolute; top: 20px; right: 20px; margin:0; padding: 0; list-style:none; font: bold 1.3em 'Trebuchet MS', Tahoma, verdana, sans-serif; height: 2.3em; } #header li { display:inline; margin:0; padding:0; } #header a { float: left; margin:0; padding:3px 10px 2px 10px; text-decoration:none; color: #CCC; } #header a:hover { border-top: 5px solid #CCC; } #header #current a { color: #FFF; border-top: 5px solid #FFF; } /* end menu tabs */ /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* additional classes */ .clear { clear: both; } .gray { color: #A0A0A0; } .comments { text-align: right; padding: 7px 15px; margin: 20px 15px 15px 15px; background: #0A1646; } [/CODE] Download Link: [url]http://www.mediafire.com/download/6fb1xajuf8bn7b6/Basica+-+Bradley+Stokes.zip[/url] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members