How to Create Business Template in Photoshop

Here is html for the footer:

</p> <div id=”wrap_footer”> <div id=”footer”> <div id=”block1″> <ul> <li><a href=”index.html”>About us</a></li> <li><a href=”products.html”>Our products</a></li> <li><a href=”download.html”>Download</a></li> <li><a href=”contact.html”>Contact</a></li> <li><a href=”#”>Client zone</a></li> <li><a href=”https://maciejkwas.pl”><strong>Catalog 2011</strong></a></li> <li></li> <li><a href=”https://www.photoshoptutorials.ws”>Our certficates</a></li> <li><a href=”https://prowseed.com”>Privacy policy</a></li> <li><a href=”https://maciejkwas.pl”>Terms of service</a></li> <li><a href=”https://maciejkwas.pl”>Sitemap</a></li> </ul> </div> <div id=”block2″> <h1>We are looking for business partners</h1> <p>Some sample text</p> </div> <div id=”block3″> <h1>Help centre</h1> <p><span>+48</span> 792 000 111</p> <p><a href=”mailto:some@sample.name”>help@jaroom.com</a></p> <h1>Copyrights</h1> <p>© 2011 – JAROOM Refrigeration LLC.<br /> Design by <a href=”https://prowseed.com”>Maciej Kwas</a> for<br /> <a href=”https://www.photoshoptutorials.ws”>pstutorials.ws</a></p> </div> </div> </div> <p>

And complete css with some comments. As you can see I made three main blocks that stands for the columns. It is simpliest way I know to create such columns, but what’s most important- it works well. With this techniqe you can make two columns as well as ten. As you can see all are floated to the left with fixed width value, so they stands next to each other.

#wrap_footer{ width:100%; margin: 0 auto; background: #333333 url(‘graf/footerbg.jpg’) bottom center repeat-x; } #wrap_footer #footer{ width:980px; margin:0 auto; position:relative; overflow: hidden; background: url(‘graf/sketch.png’) 330px 100px no-repeat; } #footer h1 { color:#fd7700; font-family: Georgia, “Times New Roman”, Times, serif; letter-spacing: 0; text-shadow: 1px 1px 1px #000; } #footer #block1 ul { font: 11px/20px Arial, Helvetica, sans-serif; color:#b2b2b2; letter-spacing:0.02em; } #footer #block1 ul li { list-style-type: none; font: 12px/24px Arial, Helvetica, sans-serif; } #footer #block1 ul li a { color:#b2b2b2; text-decoration:none; padding: 0 25px; } #footer #block1 ul li a:hover { text-decoration:none; color: white; background: #1e1e1e; border: 5px solid #1e1e1e; -webkit-border-radius: 4px; /* Safari and Chrome */
-khtml-border-radius: 4px; /* Konqueror */
-moz-border-radius: 4px; /* Firefox */
border-radius: 4px; padding: 0 20px; } #footer #block2 p { color: #727272; margin-top: 20px; margin-bottom: 30px; text-align: justify; line-height: 22px; } #footer #block3 #help { position: relative; margin-top: 20px; } #footer #block3 #help span { font-family: Georgia, “Times New Roman”, Times, serif; font-size: 18px; } #footer #block3 #help .help_phone { font-family: Georgia, “Times New Roman”, Times, serif; font-size: 18px; color: #c1c1c1; position: absolute; top: 25px; left: 90px; } #footer #block3 #help #circle { color: #050505; width: 78px; height: 78px; background-color: #454545; border-radius: 39px; -moz-border-radius: 39px; -webkit-border-radius: 39px; display: table-cell; text-align: center; vertical-align: middle; } #footer #block3 p { color: #727272; } #footer #block3 a { color:#b2b2b2; text-decoration: none; } #footer #block3 a:hover { text-decoration: underline; } #block1 { margin: 64px 0 30px 20px; float: left; width: 215px; } #block2 { margin: 64px 0 30px 0; float: left; width: 400px; } #block3 { margin: 64px 0 30px 50px; float: left; width: 270px; } .margintop10 { margin-top: 10px; } .margintop20 { margin-top: 20px; } .margintop30 { margin-top: 30px; }
At this moment you should get something like this and that would stand for our blank html template. Or maybe not really…

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21