Я первый раз начал пытатся создавать сайт по макету, и вот кое что получается, я понимаю что много ошибок, но это первый раз!
Я остановился, и не могу понять как сделать так чтобы при уменьшении страницы, всё уменьшалось равномерно, у меня когда уменьшаю страницу, просто видно пол страницы!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="photo">
<a href="assets/img/orig-3-10.jpg"></a>
</header>
<div class="item">
<section>
<h1 class="p1"><b>BOOST UP YOUR LOCAL BUSINESS</b></h1>
<h2 class="p2">Lorem lpsum is simple dummy text of the printing and typesettings industry. Lorem lpsum typesetting</h2>
</section>
<section>
<form action="">
<label for="name"></label>
<input required class="name" type="name" name="Full Name" placeholder="Full Name">
<label for="email"></label>
<input required class="email" type="email" name="Email Address" placeholder="Email Address">
<label for="phone"></label>
<input required class="phone" type="phone" name="phone" placeholder="Phone Number">
<button class="send"><b>REQUEST A QUOTE</b></button>
</form>
</section>
</div>
<section>
<nav>
<form action="index.html">
<button class="home"><b>HOME</b></button>
</form>
<form action="index.html">
<button class="service"><b>SERVICE</b></button>
</form>
<form action="index.html">
<button class="aboutus"><b>ABOUT US</b></button>
</form>
<form action="index.html">
<button class="pricingtable"><b>PRICING TABLE</b></button>
</form>
<form action="index.html">
<button class="howitwork"><b>HOW IT WORK</b></button>
</form>
<form action="index.html">
<button class="happyclients"><b>HAPPY CLIENTS</b></button>
</form>
<a href="tel:+380689965758"><b>CONTACT US</b></a>
</form>
</section>
<section>
<img src="assets/img/123123.png" alt="">
</section>
</nav>
<footer>
<p class="p3"><b>OUR SERVICES</b></p>
<p class="p4">Lorem ipsum is samply dummy Business industry.</p>
</footer>
</body>
</html>
.item {
width: 1900px;
height: 600px;
background-color: rgb(45, 194, 214);
margin-top: 140px;
box-sizing: border-box;
}
p {
margin: 0px;
}
.p1 {
color: white;
display: flex;
justify-content: center;
padding-top: 80px;
font-size: 40px;
}
.p2 {
color: white;
font-size: 20px;
display: flex;
justify-content: center;
padding-bottom: 350px;
}
.p3 {
color: black;
font-size: 25px;
position: absolute;
margin-left: 835px;
margin-top: 40px;
}
.p4 {
color: black;
position: absolute;
margin-left: 785px;
margin-top: 70px;
font-size: 16 px;
}
.name {
border: solid 1px white;
width: 293px;
height: 43px;
position: absolute;
bottom: 550px;
left: 360px;
}
.email {
border: solid 1px white;
width: 293px;
height: 43px;
position: absolute;
bottom: 296px;
left: 662px;
position: relative;
display: block;
}
.phone {
border: solid 1px white;
width: 293px;
height: 43px;
position: absolute;
bottom: 550px;
left: 980px;
}
.send {
color: white;
background-color: orange;
border: solid 1px orange;
width: 235px;
height: 47px;
position: absolute;
bottom: 550px;
left: 1290px;
}
.home {
color: white;
background-color: orange;
border: solid 1px orange;
width: 75px;
height: 32px;
position: absolute;
bottom: 886px;
left: 700px;
}
.service {
color: gray;
background-color: white;
border: solid 1px white;
width: 75px;
height: 32px;
position: absolute;
bottom: 886px;
left: 795px;
}
.aboutus {
color: gray;
background-color: white;
border: solid 1px white;
width: 90px;
height: 32px;
position: absolute;
bottom: 886px;
left: 885px;
}
.pricingtable {
color: gray;
background-color: white;
border: solid 1px white;
width: 115px;
height: 32px;
position: absolute;
bottom: 886px;
left: 990px;
}
.howitwork {
color: gray;
background-color: white;
border: solid 1px white;
width: 115px;
height: 32px;
position: absolute;
bottom: 886px;
left: 1120px;
}
.happyclients {
color: gray;
background-color: white;
border: solid 1px white;
width: 125px;
height: 32px;
position: absolute;
bottom: 886px;
left: 1250px;
}
a {
text-decoration: none;
color: gray;
background-color: white;
border: solid 1px white;
width: 150px;
height: 32px;
position: relative;
bottom: 710px;
left: 1389px;
text-decoration: none;
}
img {
height: 69px;
position: relative;
bottom: 748px;
left: 320px;
background-image: white;
