Как сделать,чтобы блок находился слева на расстоянии от стакана, то есть на скринах все будет показано.
Как у меня выглядит:
А должно быть вот так:
Код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<meta charset="utf-8" />
<title>Page Proofs</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="header-content">
<div class="logo">
<img src="img/Briefcase.png" alt="logo" /><span class="text-logo">Logo goes here</span>
</div>
<div class="header-text">
<p class="header-text1">
So begins a new age <br />of knowledge
</p>
<br />
<p class="header-text2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nulla quis <br /> turpis cursus pharetra. Fusce blandit nec tortor sit amet ullamcorper.
</p>
</div>
<form>
<button type="button" class="button">PROJECTS</button>
</form>
</div>
</header>
</body>
</html>
style:
body
{
width:100%; height:100%; margin:0; padding:0;
}
header{
height:890px; width:100%; background:url(../img/header.png) no-repeat; border:1px solid black;
}
.header-content{
margin:50px 0px 0px 350px;
}
.text-logo,.header-text2{
font-family: "ProximaNovaRegular";
}
.text-logo {
font-size: 13pt;
color: white;
text-align: center;
margin-left:20px;
}
.header-text1{
width:700px;
font-family:"GothamRoundedLight";
font-size:48pt;
border:1px solid white;
color:white;
margin:80px 0px 50px 0px;
}
.header-text2{
font-size:17pt;
color:white;
}
.button{
margin-top:50px;
font-family:"ProximaNovaSemibold";
font-size:14pt;
padding:20px;
color:white;
}
fonts:
/*ProximaNovaRegular*/
@font-face {
font-family: "ProximaNovaRegular";
src: url("../fonts/ProximaNovaRegular/ProximaNovaRegular.eot");
src: url("../fonts/ProximaNovaRegular/ProximaNovaRegular.eot?#iefix")format("embedded-opentype"),
url("../fonts/ProximaNovaRegular/ProximaNovaRegular.woff") format("woff"),
url("../fonts/ProximaNovaRegular/ProximaNovaRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
/*GothamRoundedLight*/
@font-face{
font-family: "GothamRoundedLight";
src: url(../fonts/Gotham-Rounded-Light_21020.ttf);
}
/*proximanova-semibold*/
@font-face{
font-family:"ProximaNovaSemibold";
src: url(../fonts/proximanova-semibold.otf);
}
