I'm trying to build a specific design. This is the design on desktop and mobile devices:
.section {
width: 100%;
position: relative;
}
.section__inner {
width: 100%;
display: flex;
flex-direction: column;
}
.title {
color: white;
}
.img {
width: 100%;
height: auto;
}
.text-container {
display: flex;
flex-direction: column;
background-color: black;
color: white;
}
@media only screen and (min-width: 768px) {
.section__inner {
width: 175px;
margin-left: auto;
}
.img {
position: absolute;
z-index: -1;
width: 60%;
}
}
<div class="section">
<div class="section__inner">
<h1 class="title">Title</h1>
<img class="img" src="https://source.unsplash.com/random/" alt="random" />
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet, porta turpis a, mollis lorem. Nulla consectetur gravida urna, at condimentum dolor.</p>
<p>Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur. Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus justo at nulla blandit, vel dictum nisi volutpat.
Morbi placerat augue vel libero feugiat, eu venenatis libero aliquet.
</p>
</div>
<button>Go to the link</button>
</div>
</div>
This is my code pen with what I have developed so far. I don't understand how to position these elements and what approach to take.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First, you need to set the correct max-width and width for the container element, and allow it to be centered on the screen (according to your desktop design)
Second, position the
.text-containerdiv on the left so that it is above the image, and since it is already in the correct hierarchy, there is no need to setz-index code> It will be stacked on top of the imageFinally, move the button into the
.text-containerso that it can be positioned along with the textThis is the updated section of CSS:
@media only screen and (min-width: 768px) { .section { /* Ensure that enough space is available before 1200px, you can tweak this according to your design */ width: 90%; /* So the 90% would only apply below this threshold, you can adjust the value as well if needed */ max-width: 1200px; /* Center this element */ margin: auto; } .text-container { position: absolute; top: 20%; left: 50%; } .img { width: 60%; } }Please note that when resizing the image, the same aspect ratio as the reference design should be maintained.