I'm new to coding and currently using flexbox to build the layout of my website, however, I would like to place some text and image on top of the pink rectangle that is part of the header. As I'm using flexbox I can't use position: absolute to get that result, but don't know what other alternatives to use.
What it looks like now:
body {
padding: 0;
}
* {
padding: 0;
box-sizing: border-box;
}
.background-rectangule {
width: 100%;
height: 350px;
background-color: rgba(234, 203, 193, 0.4);
position: absolute;
}
/* ------- nav --------- */
.nav-container {
display: flex;
flex-direction: row;
width: 100%;
max-width: 1024px;
margin: 0 auto;
justify-content: center;
align-items: center;
justify-content: flex-end;
}
nav {
background: white;
height: 100px;
flex-direction: row;
justify-content: space-between;
}
nav ul {
list-style: none;
display: flex;
align-items: center;
padding: 5px;
}
nav li {
position: relative;
margin-left: 45px;
font-family: "Inter", sans-serif;
}
li {
display: list-item;
}
nav a {
color: #8e7199;
text-decoration: none;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
}
/* ------- Containers --------- */
.containers {
width: 200px;
margin: 10px;
}
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.welcome-section {
width: 400px;
}
.welcome-section h1 {
font-family: "Playfair Display", serif;
}
.intro-text {
font-family: "Amiri", serif;
}<header>
<nav>
<div class="background-rectangule"></div>
<div class="nav-container">
<ul>
<li><a class="transition" href="link">home</a></li>
<li><a class="transition" href="./about.html">about</a></li>
<li><a class="transition" href="link">work</a></li>
<li><a class="transition" href="./contact.html">contact</a></li>
<li><a class="transition" href="./shop.html">shop</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="wrapper">
<div class="containers section-1">
<img src="IMG_0034.JPG" max-width="700" height="380" />
</div>
<div class="containers welcome-section">
<h1>Hey there</h1>
<div class="intro-text">
I’m Ana and I will help you with any design solution you might be looking for. I'll build the identity or your new, creative and exciting projects and restore new ones that may already exists
</div>
</div>
</div>
</main>