tengo dos problemas chicos. Necesito generar algo tal que así
Mi problema esta en que en el formulario no consigo hacer que el apartado de mensaje: aparezca arriba en lugar de abajo, ni consigo poner la linea de debajo de inicio cursos contacto, ya que si intento ponerla me descoloca todo... Les dejo imagen de como esta actualmente y el codigo.
CODIGO HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="header">
<div class="logo-header">
<img src="/Logo_ILERNAOnline.png" alt="">
</div>
<nav class="nav-menu">
<ul>
<li><a href="#">Inicio</a> </li>
<li><a href="#">Cursos</a> </li>
<li><a href="#">Contacto</a> </li>
</ul>
</nav>
</header>
<!--Formulario-->
<form class='contacto'>
<h2 class="formualario">Formulario de contacto</h2>
<div><label>Nombre:</label><input type='text' value=''></div>
<div><label>Apellidos:</label><input type='text' value=''></div>
<div><label>Telefono:</label><input type='text' value=''></div>
<div><label>Mensaje:</label><textarea rows='4'></textarea></div>
<div><input type='submit' value='Enviar'></div>
</form>
<!--Pie De Pagina-->
<footer>
<div class="footer-contenido">
<p>XXXX</p>
<p>XXXXXXX</p>
<p>SMIR</p>
</div>
</footer>
</body>
</html>
CODIGO CSS3
/* IMPORTAMOS UNA FUENTE DE GOOGLE Y CONFIGURAMOS VALORES PARA QUE EL NAV NO HAGA DE LAS SUYAS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300&display=swap');
*{
padding: 0;
margin: 0;
text-decoration: none
}
/* HEADER */
a, li{
font-family: 'Roboto', sans-serif;
color:black;
}
.logo-header img{
margin-left: 52px;
width: 130px;
}
header{
display: flex;
justify-content: stretch;
align-items: center;
padding: 0.5rem 4rem;
}
.nav-menu ul{
display: flex;
align-items: center;
padding: 0rem 10.75rem;
}
.nav-menu li{
margin-right: 1.5rem;
list-style: none;
}
.nav-menu a:hover {
color:white;
}
.nav-menu li {
background-color: #FEC940;
border: 8px solid
#FEC940;
padding: 0.25rem 1.75rem;
border-radius: 1.0rem;
}
.nav-menu li:hover{
background-color:
#00B9D0;
border:8px solid
#00B9D0
}
/* Formulario */
.contacto{
margin-left: 85px;
border: 1px;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 10px;
}
.contacto label{
display: inline-block;
width: 80px;
font-family: 'Montserrat';
}
.contacto input[type='text']{
padding: 7px 6px;
width: 294px;
resize: none;
margin: 5px 0;
margin-left: 5px;
}
.contacto textarea{
padding: 7px 6px;
width: 294px;
resize: none;
margin: 5px 0;
margin-left: 5px;
}
.contacto input[type='submit']{
margin-left: 85px;
margin-top: 20px;
border: 4px solid #FEC940;
padding: 8px 16px;
border-radius: 8px;
font-weight: bold;
background: #FEC940;
}
.contacto input[type='submit']:hover{
background-color:
#00B9D0;
border:4px solid
#00B9D0
}
h2 {
font-family: 'Roboto';
font-size: 20px;
font-weight: bold;
}
/* Pie de pagina */
footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #595959;
height: auto;
width: 100vw;
padding-top: 10px;
}
.footer-contenido{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-contenido p{
max-width: 500px;
margin: auto;
line-height: 30px;
font-size: 17px;
font-family: 'Roboto';
font-style:italic;
color:#fff;
}
/* SETEO DE COLORES */
menu{
color:#FEC940
}
elementos{
color:#00B9D0
}
textos,footer,titulo{
color:#595959
}
Gracias de antemano por vuestra ayuda, ya que estoy desesperado cada vez que intento poner la linea separadora me separa todo o aparece donde le da la gana, cuando intento subir el texto de Mensaje me descuadra también todo.... No se que hacer.
display: table;
en los<div>
padre y contenidos hijo.