os escribo para que me ayudéis porque me estoy volviendo loco. El tema es que estoy haciendo un ejercicio en el que se me ha pedido que quede distribuido los elementos de la siguiente manera usando flexbox. También quiero aprovechar de cómo hago para meter la imagen de la lupa pegado al input de form.
introducir el código aquí
He hecho un ejemplo parecido para que no se copie por si algún compañero quiere hacer un copy paste.
Aquí dejo un ejemplo de mi código hecho con CodePen y a ver si me podéis ayudar, muchas gracias. PD: estoy empezando con Frontend. Acepto consejos de todo tipo.
<header class="contenedor">
<div>
<div class="header1">
<img src="https://via.placeholder.com/150/2E1C18/FFFFFF?Text=Down.com" alt="image">
<span> This is an example </span>
</div>
<nav class="header2">
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
<li><a href="#">option 5</a></li>
</ul>
</nav>
</div>
<div class="header3">
<img src="https://via.placeholder.com/150/F8F40F/1C17C5?Text=Down.com" alt="image2">
<form class="form" action="/form/submit" method="GET">
<input class="label" type="text" name="text" placeholder="Search packages">
<input class="input" type="submit" name="submit" class="submit" value="Search">
<div>
<a class="link" href="#">Join</a>
<a class="link" href="#">Log in</a>
</div>
</div>
</header>
header > div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
.header1 img{
width:20px;
margin:0 20px;
}
.header3 img{
width:20px;
margin:0 20px;
}
.header1 {
display:flex;
justify-content:flex-start;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.header3 {
display:flex;
justify-content:space-between;
align-items:center;
}
.form {
display:flex;
margin:0 20px;
}
.header3 div {
margin:0 100px;
}
.link {
margin:0 10px;
}