Верстаю в первые макет psd
Не учитывайте черный фон вместо картинки .
Насколько плохо я это делаю и что не правильно ?
Текст по середине почему то немного ниже расположен .Хотя вроде должен быть расположен одинаково по высоте.
Сам макет https //camouf.ru/designes/ready-psd-layouts-for-saito/7836.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap" >
<div class="logo">
<p>Your Logo</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Servicing</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div class="clear">
</div>
<div class="photo">
<div class="writing">
<h1>Web develepten project</h1>
<h5>Very suitable to support all web development projects</h5>
</div>
</div>
</div>
</body>
</html>
body{
height:100%;
background-color:gray;
margin:0;
}
html{
height:100%;
margin:0;
}
.wrap{
margin: 0 auto;
min-height:100%;
width:1400px;
background-color:white;
}
.logo{
width:130px;
height:30px;
margin-left:110px;
margin-top:45px;
float:left;
}
p{
font:bold 15pt sans-serif;
margin:0;
}
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
}
a {
color:black;
text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
font:bold 12pt sans-serif;
float:left; /*Размещаем список горизонтально для реализации меню*/
margin-right:45px; /*Добавляем отступ у пунктов меню*/
}
.menu{
float:right;
margin-top:50px;
margin-bottom:55px;
color:black;
}
.photo{
width:1400px;
height:655px;
background-color:black;
position: relative
}
.clear{
clear:both;
}
.writing{
margin: auto;
color:white;
width:850px;
height:340px;
text-align:center;
position: absolute; /* 2 */
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
h1{
margin-bottom:0;
display: inline-block;
font:bold 44px sans-serif;
margin-top:150px ;
vertical-align:middle;
}
h5{
font:bold 15px sans-serif;
margin:0;
margin-top:40px;
}
Простой
