По psd макету верстал, буду рад если скажете что не так сделано, как лучше и т.д. (заранее очень благодарен за комментарии=))
Подскажите, как сделать чтобы в изображении дерева не было белых пробелов, в фотошопе при накладывании слоя дерева на слой фона не прокатывает. (вырезать не рамкой а более аккуратно только или есть другие варианты?)
Если можно как-то удобнее отредактировать пост для просмотра подскажите.
<head>
<meta charset="utf-8">
<title>верстка</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#">HOME</a></li>
<img src="img/cross1.png">
<li><a href="#">PROGRAMS</a></li>
<img src="img/cross1.png">
<li><a href="#">NEWSROOM</a></li>
<img src="img/cross1.png">
<li><a href="#">SPONSORS</a></li>
<img src="img/cross1.png">
<li><a href="#">GET INVOLVED</a></li>
<img src="img/cross1.png">
<li><a href="#">PRESS</a></li>
<img src="img/cross1.png">
<li><a href="#">CONTACT US</a></li>
</nav>
<div class="logo">
<img src="img/logo_tree.png" alt="tree">
<h1><a href="index.html">TREE FOUNDATION</a><br>
<a href="index.html" class="link1">FILADELFIA</a></h1>
</div>
</header>
<main>
<div class="text1">
<p>The Tree Foundation is dedicated to curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volut-<br>
pat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.<br>
Vestibulum dapibus, mauris nec malesuada fames ac turpic velit, rhoncus eu, luctus et interdum adipiscing wisi. Ali-<br>
quam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel biben-<br>
dum sapien massa.</p>
</div>
<div class="empty">
</div>
<div class="columns">
<div class="column column1">
<h1>PROGRAMS</h1>
<p>Lorem ipsum dolor sit amet enim. Etiam<br>
ulamcorper. Suspendisse a pellentesque<br>
dui, non felis. Maecenas malesuada elit<br>
lectus felis, malesuada ultricies. Curabitur<br>
et ligula. Ut molestie a, ultricies porta<br>
urna.</p>
<div class="button">
<a href="#"><img src="img/button.png"></a>
</div>
</div>
<div class="column column2">
<h1>GET INVOLVED</h1>
<p>Vestibulum dapibus, mauris nec malesuada<br>
fames ac turpis velit, rhoncus eu, luctus et<br>
interdum adipiscing wisi. Aliquam erat ac<br>
ipsum. Integer aliquam purus. Quisque<br>
lorem tortor fringilla sed, vestibulum id,<br>
eleifend justo vel bibendum sapien.</p>
<div class="button">
<a href="#"><img src="img/button.png"></a>
</div>
</div>
<div class="column column3">
<h1>VOLUNTEERING</h1>
<p>Pellentesque facilisis. Nulla imperdiet sit<br>
amet magna. Vestibulum dapibus, mauris<br>
nec malesuada fames ac turpis velit, rhon-<br>
cus eu, luctus et interdum adipiscing wisi.<br>
Aliquam erat ac ipsum. Integer aliquam<br>
purus. Quisque lorem tortor fringilla sed.</p>
<div class="button">
<a href="#"><img src="img/button.png"></a>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div class="text2">
<div class="prefooter">
<p>For tax deductible financial donations please issue checks to:<br>
Tree Foundation<br>
P.O.Box 2233<br>
Filadelfia, MA, 08856</p>
<ul>
<li><a href="#"><img src="img/facebook_icon.png"></a></li>
<li><a href="#"><img src="img/twitter_icon.png"></a></li>
<li><a href="#"><img src="img/RSS_icon.png"></a></li>
<li><a href="#"><img src="img/mail_icon.png"></a></li>
</ul>
</div>
</div>
</main>
<footer>
<div class="links">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROGRAMS</a></li>
<li><a href="#">NEWSROOM</a></li>
<li><a href="#">SPONSORS</a></li>
<li><a href="#">GET INVOLVED</a></li>
<li><a href="#">PRESS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<div class="text3">
2012 Tree Foundation. All Rights Reserved. Design By Webvilla.pl
</div>
</footer>
</body>
CSS:
body {
padding: 0px;
margin: 0px;
background: #fefcea;
color: #261b07;
}
@font-face {
font-family: ‘gillsansmt’;
src: url(fonts/33535gillsansmt.ttf);
}
@font-face {
font-family: ‘ubuntu’;
src: url(fonts/ubuntu.ttf);
}
a {
text-decoration: none;
font-family: gillsansmt, Arial, sans-serif;
}
header {
background: url(img/bg1.png) no-repeat center;
padding-top: 36px;
height: 423px;
}
nav {
padding: 19px 0 17px;
border: 1px solid #6b5442;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
font-family: gillsansmt, Arial, sans-serif;
font-size: 16px;
color: #19120b;
text-shadow: -1px 0 0 #d8d5c4, 1px 0 0 #8e8a7d;
}
header .logo img{
display: block;
margin: 26px auto 0;
}
header h1 {
width: 225px;
margin: 5px auto 0;
text-align: center;
line-height: 15px;
}
header h1 a{
color: #240f00;
font-size: 24px;
text-shadow: 1px 0 0 #bdb6a5, -1px 0 0 #938978;
}
header h1 .link1 {
color: #745f4d;
font-size: 16px;
letter-spacing: 15px;
text-shadow: 1px 0 0 #998977, -1px 0 0 #e1dac8;
}
main .text1 {
background: #e7e5d4;
}
main .text1 p {
background: #d8d6c5;
margin: 0px auto;
font-size: 16px;
font-family: ubuntu, Arial, sans-serif;
text-shadow: 1px 0 0 #786c5c, -1px 0 0 #ccc9b8;
box-sizing: border-box;
width: 960px;
padding: 38px 60px 38px 44px;
color: #301c0d;
}
main .empty {
box-sizing: border-box;
width: 960px;
height: 184px;
background: #bab8a5;
margin: 0 auto;
}
main .columns{
box-sizing: border-box;
width: 960px;
margin: 0 auto;
}
main .column {
box-sizing: border-box;
width: 316px;
height: 314px;
float: left;
margin-bottom: 60px;
font-size: 13px;
font-family: ubuntu, Arial, sans-serif;
text-shadow: 1px 0 0 #6b624f, -1px 0 0 #cec5b3;
}
main .column h1 {
text-align: center;
}
main .column p {
padding-left: 25px;
}
main .column1 {
background: url(img/bg_column_1.png) no-repeat center;
margin-right: 6px;
}
main .column2 {
background: url(img/bg_column_2.png) no-repeat center;
margin-right: 6px;
}
main .column3 {
background: url(img/bg_column_3.png) no-repeat center;
}
.clearfix:after {
content:’’;
display:table;
clear:both;
}
main .button {
width: 177px;
height: 58px;
margin: 27px auto 0;
}
main .text2 {
border-top: 1px solid #ccc3b1;
}
main .prefooter {
box-sizing: border-box;
height: 113px;
width: 960px;
margin: 0 auto;
}
main .prefooter p {
font-size: 12px;
font-family: ubuntu, Arial, sans-serif;
text-shadow: 1px 0 0 #a8a28f, -1px 0 0 #c4c0ad;
width: 328px;
margin: 24px 0 0 0;
float: left;
line-height: 12px;
}
main .prefooter ul {
float: right;
padding: 0px;
margin: 52px 0 0;
}
main .prefooter li {
display: inline-block;
width: 32px;
height: 31px;
margin-right: 6px;
}
main .prefooter li:last-child {
margin-right: 2px;
}
footer {
background: #503928;
box-sizing: border-box;
height: 141px;
}
footer .links {
box-sizing: border-box;
width: 960px;
margin: 0 auto;
text-align: center;
}
footer .links li {
display: inline-block;
margin-top: 21px;
padding: 0 22px 14px;
margin-left: -4px;
}
footer .links a {
color: #d4cdbc;
font-size: 12px;
font-family: gillsansmt, Arial, sans-serif;
text-shadow: 1px 0 0 #857563;
}
footer .text3 {
font-size: 12px;
font-family: ubuntu, Arial, sans-serif;
color: #a89380;
text-shadow: 1px 0 0 #856f5d;
width: 400px;
margin: 0 auto;
}