Нужно сделать так,что бы цена и кнопка "Купить" были на одном уровне
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Морозова</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</html>
<div class="fo0">
<div class="fon">
<div class="fon2">
<img class = "phot" src = "https://geekufa.ru/images/upload/17115-smartfon-apple-iphone-16-plus-256gb-white_1024.jpg">
<div class="text"><b>Iphone 16</b></div>
<div class="text2"> доступен в пяти цветах </div>
<button class="butt" type= "button" style= "background-color:limegreen; border-color:limegreen ;color:white; width: 70px; height: 25px ">Купить</button>
<div class="hsen"><b>$971,78</b></div>
</div>
</div>
</div>
</body>
</html>
CSS:
.fo0{
background-color:rgb(209, 209, 209);
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
}
.fon {
width: 1500px;
height: 700px;
background-color: rgb(209, 209, 209);
display: grid;
grid-area:1;
z-index: 1;
}
.fon2{
width: 650px;
height: 550px;
background-color:rgb(255, 255, 255);
display: grid;
grid-area:2;
z-index: 3;
display: block;
grid-area: 2;
margin:0 auto;
}
.phot{
width:450px;
height:400px;
display: grid;
grid-area:2;
z-index: 3;
display: block;
margin:0 auto;
}
.text {
display: grid;
margin:0 auto;
display:block;
text-align:center;
grid-area:3;
font-weight: bolder;
width: 100px;
height: 20px;
}
.text2 {
display: grid;
grid-template-columns: auto;
grid-area:4;
font-weight: bolder;
margin:0 auto;
display:block;
text-align:center;
}
.butt {
margin-top: 40px;
margin-left: 325px;
text-align:center;
}
.hsen{
color: limegreen;
width: 300px;
height: 80px;
margin-left: 250px;
}
