firestormodk Posted September 18, 2012 Share Posted September 18, 2012 Hi all I'm new to this forum. I made a design with Illustrator (see attachment). I need this to be written in HTML & CSS. The thing is, I can properly write PHP, but I really suck at designing webpages. Thanks in advance! Stijn Hoste Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted September 18, 2012 Share Posted September 18, 2012 you missed the freelancer section Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted September 18, 2012 Share Posted September 18, 2012 The thing is, I can properly write PHP, but I really suck at designing webpages. If can write php then you should pick up css pretty fast. Quote Link to comment Share on other sites More sharing options...
Christian F. Posted September 19, 2012 Share Posted September 19, 2012 I'd also strongly recommend you to rethink your colour choice, especially that of the fonts. People with reduced eyesight will have huge problems reading some of that text, due to the lack of contrast. Quote Link to comment Share on other sites More sharing options...
Bubblychaz Posted September 21, 2012 Share Posted September 21, 2012 you missed the freelancer section ^^ This Quote Link to comment Share on other sites More sharing options...
RLAArtistry Posted September 25, 2012 Share Posted September 25, 2012 Not sure if you still want this, but here is a starter for you. You should take Christian F advice and change the color scheme of the body, especially the font. Here is the CSS body { font-family: impact; background-color: #666464; margin: 0; padding: 0; text-align: center; height: 100%; } .cuplinTemp #container{ width: 100%; background-color: #F7F7F7; text-align: center; min-height: 100%; } #headerWrapper { width: 100%; text-align: left; background-image: url(../images/BG_header.jpg); background-repeat: repeat; height: 175px; } #contentWrapper { width: 100%; text-align: center; } .content { width: 97%; margin: 0 auto; text-align: left; background-color: #f8a71a; } #footerWrapper { width: 100%; text-align: center; background-color: #FFFFFF; min-height: 100%; } There are some inline CSS in the HTML section of the page, that way you can have an idea of which styling is for what. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>"]http://www.w3.org/TR...nsitional.dtd">[/url] <html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/cuplintemp.css" rel="stylesheet" type="text/css" /> <body class="bakerTemp"> <div id="container"> <div id="headerWrapper"> <div class="logo" style="margin-left:20px; float: left;"><img src="images/logo.jpg" alt="cuplin logo" /></div> <div class="linksBtns" style="float: right;"> <ul style="list-style-type: none; margin-top: 29px;"> <li style="float:left; margin-right: 20px;"><img src="images/calendar.png" alt="Calendar" /></li> <li style="float:left; margin-right: 20px;"><img src="images/preference.png" width="143" height="142" alt="Preference" /></li> <li style="float:left; margin-right: 20px;"><img src="images/question.png" width="143" height="142" alt="Question" /></li> <li style="float:left; margin-right: 20px;"><img src="images/social.png" width="143" height="142" alt="Social" /></li> </ul> </div> <!-------------------------------- end #headerWrapper -------------------------------------></div> <div id="contentWrapper"> <div id="listings" style="height: 70px"> <ul style="list-style-type: none; margin-bottom: 50px"> <li style="float:left; margin-right: 20px;"><img src="images/listItem-1.jpg" width="228" height="53" /></li><!-- This does not have to be an image, you can use <span></span> around your text; set width, height, font and font color --> <li style="float:left; margin-right: 20px;"><img src="images/listItem-1.jpg" width="228" height="53" /></li> <li style="float:left; margin-right: 20px;"><img src="images/listItem-2.jpg" width="228" height="53" /></li> <li style="float:left; margin-right: 20px;"><img src="images/listItem-3.jpg" width="228" height="53" /></li> </ul> </div> <div class="content"> <table width="100%" border="0"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> <!------------------------------- end #contentWrapper -------------------------------------></div> <div id="footerWrapper"> <div class="footerContent"> </div> <!------------------------------- end #footerWrapper --------------------------------------></div> <!--------------------------------- end #container ----------------------------------------></div> </body> </html> The images are too large, you will have to reduce their size by at least 50%. Here are the images you need for this sample. I am not sure if you will be using PHP to render dynamic information into the content area or if it is static. You can use tables for that, some people don't like using tables but it is the easiest option. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.