I need help positioning the image in the center of div: #two, with the screen of the laptop displayed in div two and the lower body of the laptop in div: #three. Here is an example image of how I want it to look, but I'm struggling to achieve this. https://i.sstatic.net/MjVyK.jpg It should also be responsive so that if I resize the window width and the height of div: #one changes, the image moves accordingly.
Any assistance would be greatly appreciated. Thank you!
body{
margin: 0;
}
#one{
background-color: #293462;
height: 20vw;
display: grid;
align-items: end;
}
#two{
background-color: #216583;
min-height: 40px;
width: 100vw;
}
#three{
background-color: #f76262;
min-height: 100px;
}
h1{
margin: 0;
}
ul{
display: grid;
grid-template-columns: repeat(5, 1fr);
}
li{
list-style: none;
text-align: center;
}
li:nth-child(3){
grid-column: 4/5;
}
img{
height: 150px;
position: absolute;
left: 50%;
}<div id="one">
<div id="two">
<ul>
<li><h1>text</h1></li>
<li><h1>text</h1></li>
<li><h1>text</h1></li>
<li><h1>text</h1></li>
</ul>
</div>
<img src="https://imgur.com/n8I8D6E.png" alt="laptop">
</div>
<div id="three"></div>