I need a clean, flexible CSS/HTML template built from the sketch that is attached. The sketch includes all of the colors and measurements that you should need. All of the measurements are approximations as I will want to slide things around once you've got it in CSS. I know that you could build this with absolute positioning in about 5 minutes, but I want something built properly that won't break if I add a menu item or change the width of the content area. A few more details:
Layout: It's ok if the design is pinned to the top left.
1) The width of the menu bar will be approximately 500px (like the content), but I have not yet settled on a width. Further, I will be playing with the font size and spacing on the menu and submenu, so the width should be flexible and it should resize cleanly. If possible, I would also like to be able to play with the vertical bar heights and spacing to correspond to font and size changes. It wouldn't be a bad idea to make the spacing and heights here dependent on ems rather than pixels.
2) The top left corner is open for a logo, but I don't know what size it will be. This means that you should include a background image in the css, but allow me to shift the whole site down and left if the logo is bigger than I have planned.
3) Colors and lines: I have included red lines with px numbers to indicate sizes of things. I have also included color swatches and hex values for the colors I need. NEITHER of these should be included in the final CSS. They are just for your reference.
4) The blue lines (under the menu, vertical bars on the menu, the long horizontal line under the title, the long vertical line to the left of the content) are all the blue on the swatches (16314F) and all 2px wide. The long vertical line should extend to the bottom of the content, no matter how much there is.
5) The darker yellow is only used in the submenu for "unselected" items. Selected items on the submenu are white. Selected items on the menu are the light yellow. Unselected menu items are blue.
6) Basically ignore the gradient image underneath the submenu. You have the dimensions, so include space for it in the css. If you want to make a placeholder and you have the necessary image skills, go ahead and make one but don't feel that it is necessary. Again, I will be playing with the gradient and the width when you're done.
7) Fonts: I will definitely play with these after you finish:
Sans for menu, title, submenu
Serif for the content
submenu: 12 pt
Obviously, these should be easily changeable in the css.
8) Possible left column. I may put some content (possibly advertisements or something similar) in the left column (that blank space to the left of the content). It's not in the sketch, but the css you create should allow me to add text or leave it blank without wrecking the spacing on the rest of the site.
This template should look good in:
FF (latest) both PC and MAC (test on both, they treat fonts differently)
Safari (latest) both PC and MAC (test on both, they treat fonts differently)
The most important things are these:
- Clean, standards-based CSS. If you need help on standards, see the W3C
- Flexible layout. I will tweak the spacing and the fonts in your CSS. Your work must allow that without breaking.
- I too can make a sloppy, rigid layout using absolutes that holds together like a house of cards. I am requiring something better. If you are only learning CSS, this is not a good project to try.
Bids should include samples of your CSS work. Please let me know if you have any questions.
38 freelancer bu iş için ortalamada 108$ teklif veriyor
Hi Please check our portfolio at http://www.i-cubes.net & our designer who will work if we win bid at http://www.i-cubes.net/portfolio/portfolio.html. Thanks