Сам сайт В общем, не только инпуты съезжают на самом деле, а вся верстка :) Но хотелось бы понять, почему именно инпуты снизу страницы съезжают (your name, your email, your message here), хотя текст в подобных рамках выше (view our history) не выходят за границы рамки.
<!DOCTYPE html>
<html>
<head>
<title>Maket-example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/block.css">
</head>
<body class="maket">
<div class="header">
<div class="header__left"></div>
<div class="header__right">
<a><img class="maket__header-three-lines" src="images/maket__header-three-lines.png"></a>
<p class="light-font">Ali Sayed's</p>
<p class="bold-font">Web Designing</p>
<p class="regular-font">Project</p>
<p class="paragraph1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
</p>
<p class="paragraph2">
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dol.
</p>
</div>
</div>
<div class="mider">
<div class="mider__left">
<p class="regular-font mider-caption1">Drawing <b>Scketch</b></p>
<p class="paragraph mider-paragraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.
</p>
<p class="regular-font mider-caption2">Making <b>Design</b></p>
<p class="paragraph mider-paragraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.
</p>
<p class="regular-font mider-caption3">Developing <b>Product</b></p>
<p class="paragraph mider-paragraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.
</p>
</div>
<div class="mider__right">
<div class="mider__right-top">
<p class="regular-font mider__right-top-caption">Best <b>Starting</b></p>
<p class="paragraph mider__right-top-paragraph">
Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.
</p>
<img class="mider__right-top-image" src="images/maket__middle-right-border-top.png">
<p class="regular-font mider__right-top-icon-caption">View Our History</p>
</div>
<div class="mider__right-bot">
<p class="regular-font mider__right-top-caption">Best <b>Starting</b></p>
<p class="paragraph mider__right-top-paragraph">
Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.
</p>
<img class="mider__right-top-image" src="images/maket__middle-right-border-bot.png">
<p class="regular-font mider__right-top-icon-caption">View Our History</p>
</div>
</div>
</div>
<div class="footer">
<div class="footer__left">
<p class="regular-font footer__left-text">This Webpage Is<br>
<b>Designed By</b></p>
<img class="footer__left-icon" src="images/maket__footer-left-icon.png">
<p class="regular-font footer__left-Ali-Sayed"><b>Ali Sayed</b></p>
<p class="footer__left-Graphic-Designer">Graphic Designer</p>
</div>
<div class="footer__right">
<p class="regular-font footer__right-caption">Say <b>'Hello'</b></p>
<img class="footer__right-border-small-1" src="images/maket__footer-right-border-small.png">
<img class="footer__right-border-small-2" src="images/maket__footer-right-border-small.png">
<img class="footer__right-border-big" src="images/maket__footer-right-border-big.png">
<form class="form-1"><input type="text" class="input-1" placeholder="Your name"></form>
<form class="form-2"><input type="text" class="input-1" placeholder="Your Email"></form>
<form class="form-3"><input type="text" class="input-1" placeholder="Your Message Here ...">
<p class="paragraph footer__right-footer1">Stay Connnected With Us...</p>
<div class="block-footer">
<img src="images/footer__right-footer-img1.png" width="45px" height="45px" class="footer__right-footer-img1">
<img src="images/footer__right-footer-img2.png" width="45px" height="45px" class="footer__right-footer-img2">
<img src="images/footer__right-footer-img3.png" width="45px" height="45px" class="footer__right-footer-img3">
<img src="images/F.png" class="footer__right-footer-icon1">
<img src="images/ball.png" class="footer__right-footer-icon2">
<img src="images/bird.png" class="footer__right-footer-icon3">
</div>
<p class="paragraph footer__right-footer2">Please Feel Free To Contat With me For Any Kind of Project.</p>
</div>
</div>
</div>
</body>
</html>
css:
* {
margin: 0;
}
body {
background-color: #f3f3f3;
}
p {
font-family: Roboto, Sans-Serif;
font-size: 18pt;
display: block;
}
.header {
//border: 2px solid red;
font-size: 0;
height: 715px;
}
.light-font, .bold-font, .regular-font {
font-size: 3vw;
}
.light-font {
font-weight: lighter;
margin: 75px 0 0 54px;
}
.bold-font {
font-weight: bold;
margin-left: 54px;
}
.regular-font {
margin-left: 54px;
}
.paragraph {
font-size: 1.3vw;
line-height: 1.5;
}
.paragraph1 {
margin: 70px 0 0 54px;
font-size: 1.3vw;
width: 85%;
line-height: 1.5;
}
.paragraph2 {
margin: 30px 0 0 54px;
font-size: 1.3vw;
width: 85%;
line-height: 1.5;
}
.maket__header-three-lines {
display: block;
margin: 57px 54px;
}
.maket__header-three-lines:hover {
background-color: white;
cursor: pointer;
}
.header__left {
background: url(../images/maket__header-left.png) no-repeat;
background-size: 100% 100%;
width: 65%;
height: 100%;
display: inline-block;
}
.header__right {
//background-image: url(../images/2.png);
width: 35%;
display: inline-block;
vertical-align: top;
}
.mider {
font-size: 0;
height: 853px;
}
.mider__left {
background: url(../images/maket__middle-left.png) no-repeat;
background-size: 100% 100%;
width: 45%;
height: 100%;
display: inline-block;
vertical-align: top;
color: white;
}
.mider-caption1{
margin: 70px 0 0 66px;
letter-spacing: 2px;
font-weight: 300;
}
.mider-caption2{
margin: 80px 0 0 66px;;
letter-spacing: 2px;
font-weight: 300;
}
.mider-caption3{
margin: 80px 0 0 66px;;
letter-spacing: 2px;
font-weight: 300;
}
.mider-paragraph {
margin: 28px 0 0 66px;
width: 80%;
height: 95px;
}
.mider__right {
display: inline-block;
width: 55%;
height: 100%;
}
.mider__right-top {
background-image: url(../images/maket__middle-right-top.png);
background-size: 100% 100%;
width: 100%;
height: 50%;
}
.mider__right-top-caption {
display: inline-block;
letter-spacing: 2px;
font-weight: 300;
margin: 70px 0 0 66px;
}
.mider__right-top-paragraph {
margin: 28px 0 0 66px;
width: 80%;
}
.mider__right-top-image {
margin: 53px 0 0 55px;
}
.mider__right-top-icon-caption {
margin: -39px 0 0 100px;
font-size: 13pt;
}
.mider__right-top-icon-caption:hover {
color: #948282;
cursor: pointer;
}
.mider__right-bot {
background-image: url(../images/maket__middle-right-bot.png);
width: 100%;
height: 50%;
color: white;
}
.footer {
height: 715px;
font-size: 0;
}
.footer__left {
background-image: url(../images/maket__footer-left.png);
background-size: 100% 100%;
width: 33%;
height: 100%;
display: inline-block;
vertical-align: top;
color: white;
}
.footer__left-text {
margin-top: 75px;
}
.footer__left-icon {
margin: 253px 0 0 59px;
}
.footer__left-Ali-Sayed {
margin: 34px 0 0 59px;
}
.footer__left-Graphic-Designer {
margin: 17px 0 0 59px;
font-size: 13pt;
}
.footer__right {
background-image: url(../images/maket__footer-right.png);
background-size: 100% 100%;
width: 67%;
height: 100%;
display: inline-block;
position: relative;
color: white;
}
.footer__right-caption {
margin-top: 75px;
}
.footer__right-border-small-1, .footer__right-border-small-2 {
width: 31.8%;
}
.footer__right-border-small-1 {
margin: 41px 0 0 55px;
}
.footer__right-border-small-2 {
margin-left: 13px;
}
.footer__right-border-big {
margin: 15px 0 0 55px;
width: 65%;
}
.input-1 {
background-color: transparent;
border-width: 2px;
font: Roboto, Sans-Serif;
font: 100 13pt Roboto;
font-size: 1.3vw;
border-width: 0;
color: white;
}
::placeholder { /* Most modern browsers support this now. */
color: #FFF;
}
.form-1 {
position: absolute;
left: 80px;
top: 190px;
}
.form-2 {
position: absolute;
left: 415px;
top: 190px;
}
.form-3 {
position: absolute;
left: 80px;
top: 270px;
}
.footer__right-footer1 {
margin-top: 195px;
}
.footer__right-footer-img1 {
margin-top: 22px;
}
.footer__right-footer-img2 {
margin-left: 7px;
}
.footer__right-footer-img3 {
margin-left: 7px;
}
.footer__right-footer2 {
margin-top: 50px;
}
.block-footer {
position: relative;
}
.footer__right-footer-icon1 {
position: absolute;
margin: 32px 0 0 -133px;
}
.footer__right-footer-icon2 {
position: absolute;
margin: 32px 0 0 -87px;
}
.footer__right-footer-icon3 {
position: absolute;
margin: 35px 0 0 -33px;
}