Mover formulario de HTML5
Publicado por Juan (1 intervención) el 08/12/2025 20:34:50
Hola todos. Estoy intento crear una página web y necesito mover el formulario a la centro de la derecha(no al borde de la derecha) por favor si me pueden ayudar. Comparto el código de HTML5 y CSS. Saludos.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einheit S.A - Software de Alta Calidad</title>
<link rel="stylesheet" href="styleenheit.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="Button.css">
</head>
<body>
<div id="top"></div>
<header>
<div class="container">
<div class="logo">Einheit SA</div>
<div class="nav-links">
<nav class="nav">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<button class="search-button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</header>
<main>
<section id="adelantando-el-futuro-section" class="section">
<h1>Adelantando el Futuro</h1>
<p>Ofrecemos soluciones de desarrollo de software innovadoras para tu negocio. Centrándonos en el desarrollo de software a medida y de alta calidad.</p>
</section>
<section class="section services-section">
<h2>Nuestros Servicios</h2>
<a href="#" class="btn">Desarrollo de Software</a>
<a href="#" class="btn">Consultoría</a>
<a href="#" class="btn">Administración de Servicios IT</a>
<a href="#" class="btn">Asistencia Técnica</a>
</section>
<section class="carousel-section">
<div class="image-carousel">
<img src="DC9B8602-41AC-484F-A767-63FBD8D7D4D8.jpeg" alt="First Image">
<img src="pexels-gerardo-pantoja-826939143-29996343.jpg" alt="Second Image">
</div>
<div class="carousel-nav">
<button class="prev-btn"><</button>
<button class="next-btn">></button>
</div>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
</div>
</section>
<section id="contacto-section" class="section contact-form-section">
<form name="myform" id="myform" method="post" autocomplete="off">
<main>
<section id="contacto-section" class="section contact-form-section">
<form name="contactForm" id="contactForm" method="post" autocomplete="off">
<h2>Contáctanos: Estamos para ayudarte</h2>
<div class="form-control">
<label for="firstName">Nombre:</label>
<input type="text" id="firstName" name="first_name" placeholder="Escribe tu nombre" required>
</div>
<div class="form-control">
<label for="lastName">Apellido:</label>
<input type="text" id="lastName" name="last_name" placeholder="Escribe tu apellido" required>
</div>
<div class="form-control">
<label for="email-field">Correo Electrónico:</label>
<input type="email" id="email-field" name="email_address" placeholder="[email protected]" required>
</div>
<div class="form-control">
<label for="message">Tu Mensaje:</label>
<textarea id="message" name="message" rows="5" placeholder="Escribe tu mensaje aquí..." required></textarea>
</div>
<div class="form-actions">
<button type="submit">Enviar Mensaje</button>
</div>
</form>
</section>
</main>
<section id="another form">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML5 Form</title>
</head>
<body>
<footer class="footer">
<p>© Copyright 2025 Einheit S.A Todos los derechos reservados</p>
<p>Contacto: 999-999 | Email: [email protected]</p>
<p>Roma - Italia</p>
<div class="social-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</footer>
<button id="scrollToTopBtn" title="Go to top">
<i class="fa-caret-up"></i>
</button>
<script src="einheit.js"></script>
</body>
</html>
CSS
/* ------------------------------------------------------------- */
/* FORMULARIO DE CONTACTO - ESTILOS ESPECÍFICOS */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* GENERAL STYLES & TYPOGRAPHY */
/* ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
color: #fff;
background-image: url("software.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
h1, h2 {
color: #000;
margin-bottom: 10px;
}
h1 {
font-size: 2.5rem;
}
/* ------------------------------------------------------------- */
/* HEADER & NAVIGATION */
/* ------------------------------------------------------------- */
header {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 5%;
position: sticky;
top: 0;
z-index: 1000;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px; /* Add a gap here to separate the logo and the nav links */
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #007bff;
}
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
margin: 0;
}
nav a {
text-decoration: none;
color: #555;
font-weight: 500;
padding: 10px 15px;
transition: color 0.3s;
}
nav a:hover {
color: #007bff;
}
.search-button {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: #666;
}
/* ------------------------------------------------------------- */
/* MAIN CONTENT & BUTTONS */
/* ------------------------------------------------------------- */
#cabeceraweb {
background-color: #808080;
}
.section {
text-align: center;
padding: 60px 20px;
}
.btn {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
/* ------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------- */
.footer {
background-color: black;
color: #f4f4f4;
text-align: center;
padding: 20px;
}
.footer p {
margin: 5px 0;
}
.social-icons {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 20px;
}
.social-icons i {
color: #f4f4f4;
font-size: 1.5rem;
transition: color 0.3s;
}
.social-icons i:hover {
color: #007bff;
}
/* ------------------------------------------------------------- */
/* SECTIONS STYLES */
/* ------------------------------------------------------------- */
#adelantando-el-futuro-section {
background-image: url('abstract-binary-code-background-digital-technology-pattern-3d-render-illustration-2R91P94.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
}
#adelantando-el-futuro-section h1,
#adelantando-el-futuro-section p {
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#salto {
background-image: url('pexels-gerardo-pantoja-826939143-29996343.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
}
#salto h2,
#salto p {
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#salto p {
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* ------------------------------------------------------------- */
/* SCROLL TO TOP BUTTON */
/* ------------------------------------------------------------- */
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#scrollToTopBtn:hover {
background-color: #333;
}
#scrollToTopBtn .fa-caret-up {
font-size: 24px;
}
/* ------------------------------------------------------------- */
/* IMAGE CAROUSEL SECTION - CORRECTED CODE */
/* ------------------------------------------------------------- */
.carousel-section {
width: 100%;
position: relative; /* Essential for positioning the navigation buttons */
overflow: hidden; /* Creates the "window" effect by hiding overflow */
}
.image-carousel {
display: flex; /* Arranges the images in a horizontal row */
width: 200%; /* The container is twice as wide as the section */
transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}
.image-carousel img {
width: 50%; /* Each image takes up exactly half of the container's width */
height: 60vh;
object-fit: cover;
}
/* Styles for navigation buttons and dots (rest of your CSS) */
/* ... */
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
padding: 0 10px;
opacity: 0;
transition: opacity 0.3s;
}
.carousel-section:hover .carousel-nav {
opacity: 1;
}
.carousel-nav button {
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
font-size: 1.5rem;
cursor: pointer;
border-radius: 50%;
}
.carousel-dots {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
z-index: 10;
}
.dot {
height: 15px;
width: 15px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.dot.active {
background-color: #717171;
}
/* Estilo básico para que cada grupo de campo ocupe su propia línea para FORMULARIO */
.form-control {
margin-bottom: 15px; /* Espacio entre cada campo */
display: block; /* Asegura que cada campo ocupe su propia fila */
}
/* Opcional: Para que el label ocupe un poco más de espacio a la izquierda */
.form-control label {
display: inline-block;
width: 150px; /* Ancho fijo para alinear todos los labels */
text-align: right; /* Alinea el texto del label a la derecha */
margin-right: 10px;
}
/* Estilo para la sección de contacto (para que el formulario no ocupe todo el ancho) */
.contact-form-section {
background-color: #f4f4f4; /* Fondo claro para el formulario */
padding: 40px 20px;
color: #333; /* Color de texto oscuro para el contenido de la sección */
}
/* Estilo para el contenedor del formulario */
#contactForm {
max-width: 600px; /* Limita el ancho del formulario */
margin: 0 auto; /* Centra el formulario horizontalmente */
padding: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Estilo para los títulos (H2 dentro del formulario) */
#contactForm h2 {
color: #007bff;
text-align: center;
margin-bottom: 30px;
}
/* Usamos Flexbox para alinear la etiqueta y el campo en cada fila */
.form-control {
display: flex;
flex-direction: row; /* Coloca label e input en la misma fila */
align-items: center; /* Alinea verticalmente */
margin-bottom: 20px; /* Espacio entre las filas */
gap: 15px; /* Espacio entre el label y el input */
}
/* Estilo para el label (le damos un ancho fijo para alineación) */
.form-control label {
width: 150px; /* Ancho fijo para los labels */
flex-shrink: 0; /* Evita que el label se encoja */
text-align: right; /* Alinea el texto del label a la derecha */
font-weight: 600;
}
/* Estilo para todos los campos de entrada */
.form-control input[type="text"],
.form-control input[type="email"],
.form-control input[type="search"],
.form-control input[type="url"],
.form-control textarea {
flex-grow: 1; /* Permite que el input ocupe el espacio restante */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
min-width: 0; /* Evita desbordamiento en Flexbox */
}
/* Estilo específico para el área de texto (Mensaje) */
.form-control textarea {
resize: vertical; /* Permite redimensionar solo verticalmente */
}
/* Estilo para el contenedor del botón (centrado) */
.form-actions {
text-align: center;
margin-top: 30px;
}
/* Estilo para el botón de envío */
.form-actions button[type="submit"] {
padding: 12px 30px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.form-actions button[type="submit"]:hover {
background-color: #0056b3;
}
/* Limitar el formulario a un ancho moderado a la derecha */
#contactForm {
/* El ancho es el "average side" que solicitas (400px es un buen tamaño) */
width: 100%;
max-width: 400px;
padding: 30px;
background: #ffffff; /* Fondo blanco para destacar */
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
/* Color de texto para el formulario (si el fondo de la sección es oscuro) */
color: #333;
}
#myform h2 {
color: #007bff; /* Asegura que el título sea visible */
text-align: center;
}
/* Alineación de Label y Input (Reglas de la respuesta anterior, pero reconfirmadas) */
.form-control {
display: flex; /* Usa Flexbox para la fila label-input */
align-items: center;
margin-bottom: 15px;
}
.form-control label {
width: 120px; /* Ancho fijo para las etiquetas (el lado izquierdo de la fila) */
flex-shrink: 0; /* Evita que la etiqueta se encoja */
text-align: left;
padding-right: 15px; /* Espacio entre el label y el campo */
font-weight: 600;
}
.form-control input[type="text"],
.form-control input[type="email"],
.form-control input[type="search"],
.form-control input[type="url"],
.form-control textarea {
flex-grow: 1; /* Permite que el campo ocupe todo el espacio restante */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
/* Asegura que no haya desbordamiento horizontal */
min-width: 0;
}
/* Configuración del Formulario (Ancho Fijo) */
#myform {
/* Mantiene el ancho fijo a la derecha */
width: 100%;
max-width: 400px;
padding-center: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: #333;
}
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einheit S.A - Software de Alta Calidad</title>
<link rel="stylesheet" href="styleenheit.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="Button.css">
</head>
<body>
<div id="top"></div>
<header>
<div class="container">
<div class="logo">Einheit SA</div>
<div class="nav-links">
<nav class="nav">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<button class="search-button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</header>
<main>
<section id="adelantando-el-futuro-section" class="section">
<h1>Adelantando el Futuro</h1>
<p>Ofrecemos soluciones de desarrollo de software innovadoras para tu negocio. Centrándonos en el desarrollo de software a medida y de alta calidad.</p>
</section>
<section class="section services-section">
<h2>Nuestros Servicios</h2>
<a href="#" class="btn">Desarrollo de Software</a>
<a href="#" class="btn">Consultoría</a>
<a href="#" class="btn">Administración de Servicios IT</a>
<a href="#" class="btn">Asistencia Técnica</a>
</section>
<section class="carousel-section">
<div class="image-carousel">
<img src="DC9B8602-41AC-484F-A767-63FBD8D7D4D8.jpeg" alt="First Image">
<img src="pexels-gerardo-pantoja-826939143-29996343.jpg" alt="Second Image">
</div>
<div class="carousel-nav">
<button class="prev-btn"><</button>
<button class="next-btn">></button>
</div>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
</div>
</section>
<section id="contacto-section" class="section contact-form-section">
<form name="myform" id="myform" method="post" autocomplete="off">
<main>
<section id="contacto-section" class="section contact-form-section">
<form name="contactForm" id="contactForm" method="post" autocomplete="off">
<h2>Contáctanos: Estamos para ayudarte</h2>
<div class="form-control">
<label for="firstName">Nombre:</label>
<input type="text" id="firstName" name="first_name" placeholder="Escribe tu nombre" required>
</div>
<div class="form-control">
<label for="lastName">Apellido:</label>
<input type="text" id="lastName" name="last_name" placeholder="Escribe tu apellido" required>
</div>
<div class="form-control">
<label for="email-field">Correo Electrónico:</label>
<input type="email" id="email-field" name="email_address" placeholder="[email protected]" required>
</div>
<div class="form-control">
<label for="message">Tu Mensaje:</label>
<textarea id="message" name="message" rows="5" placeholder="Escribe tu mensaje aquí..." required></textarea>
</div>
<div class="form-actions">
<button type="submit">Enviar Mensaje</button>
</div>
</form>
</section>
</main>
<section id="another form">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML5 Form</title>
</head>
<body>
<footer class="footer">
<p>© Copyright 2025 Einheit S.A Todos los derechos reservados</p>
<p>Contacto: 999-999 | Email: [email protected]</p>
<p>Roma - Italia</p>
<div class="social-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</footer>
<button id="scrollToTopBtn" title="Go to top">
<i class="fa-caret-up"></i>
</button>
<script src="einheit.js"></script>
</body>
</html>
CSS
/* ------------------------------------------------------------- */
/* FORMULARIO DE CONTACTO - ESTILOS ESPECÍFICOS */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* GENERAL STYLES & TYPOGRAPHY */
/* ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
color: #fff;
background-image: url("software.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
h1, h2 {
color: #000;
margin-bottom: 10px;
}
h1 {
font-size: 2.5rem;
}
/* ------------------------------------------------------------- */
/* HEADER & NAVIGATION */
/* ------------------------------------------------------------- */
header {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 5%;
position: sticky;
top: 0;
z-index: 1000;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px; /* Add a gap here to separate the logo and the nav links */
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #007bff;
}
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
margin: 0;
}
nav a {
text-decoration: none;
color: #555;
font-weight: 500;
padding: 10px 15px;
transition: color 0.3s;
}
nav a:hover {
color: #007bff;
}
.search-button {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: #666;
}
/* ------------------------------------------------------------- */
/* MAIN CONTENT & BUTTONS */
/* ------------------------------------------------------------- */
#cabeceraweb {
background-color: #808080;
}
.section {
text-align: center;
padding: 60px 20px;
}
.btn {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
/* ------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------- */
.footer {
background-color: black;
color: #f4f4f4;
text-align: center;
padding: 20px;
}
.footer p {
margin: 5px 0;
}
.social-icons {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 20px;
}
.social-icons i {
color: #f4f4f4;
font-size: 1.5rem;
transition: color 0.3s;
}
.social-icons i:hover {
color: #007bff;
}
/* ------------------------------------------------------------- */
/* SECTIONS STYLES */
/* ------------------------------------------------------------- */
#adelantando-el-futuro-section {
background-image: url('abstract-binary-code-background-digital-technology-pattern-3d-render-illustration-2R91P94.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
}
#adelantando-el-futuro-section h1,
#adelantando-el-futuro-section p {
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#salto {
background-image: url('pexels-gerardo-pantoja-826939143-29996343.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
}
#salto h2,
#salto p {
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#salto p {
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* ------------------------------------------------------------- */
/* SCROLL TO TOP BUTTON */
/* ------------------------------------------------------------- */
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#scrollToTopBtn:hover {
background-color: #333;
}
#scrollToTopBtn .fa-caret-up {
font-size: 24px;
}
/* ------------------------------------------------------------- */
/* IMAGE CAROUSEL SECTION - CORRECTED CODE */
/* ------------------------------------------------------------- */
.carousel-section {
width: 100%;
position: relative; /* Essential for positioning the navigation buttons */
overflow: hidden; /* Creates the "window" effect by hiding overflow */
}
.image-carousel {
display: flex; /* Arranges the images in a horizontal row */
width: 200%; /* The container is twice as wide as the section */
transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}
.image-carousel img {
width: 50%; /* Each image takes up exactly half of the container's width */
height: 60vh;
object-fit: cover;
}
/* Styles for navigation buttons and dots (rest of your CSS) */
/* ... */
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
padding: 0 10px;
opacity: 0;
transition: opacity 0.3s;
}
.carousel-section:hover .carousel-nav {
opacity: 1;
}
.carousel-nav button {
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
font-size: 1.5rem;
cursor: pointer;
border-radius: 50%;
}
.carousel-dots {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
z-index: 10;
}
.dot {
height: 15px;
width: 15px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.dot.active {
background-color: #717171;
}
/* Estilo básico para que cada grupo de campo ocupe su propia línea para FORMULARIO */
.form-control {
margin-bottom: 15px; /* Espacio entre cada campo */
display: block; /* Asegura que cada campo ocupe su propia fila */
}
/* Opcional: Para que el label ocupe un poco más de espacio a la izquierda */
.form-control label {
display: inline-block;
width: 150px; /* Ancho fijo para alinear todos los labels */
text-align: right; /* Alinea el texto del label a la derecha */
margin-right: 10px;
}
/* Estilo para la sección de contacto (para que el formulario no ocupe todo el ancho) */
.contact-form-section {
background-color: #f4f4f4; /* Fondo claro para el formulario */
padding: 40px 20px;
color: #333; /* Color de texto oscuro para el contenido de la sección */
}
/* Estilo para el contenedor del formulario */
#contactForm {
max-width: 600px; /* Limita el ancho del formulario */
margin: 0 auto; /* Centra el formulario horizontalmente */
padding: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Estilo para los títulos (H2 dentro del formulario) */
#contactForm h2 {
color: #007bff;
text-align: center;
margin-bottom: 30px;
}
/* Usamos Flexbox para alinear la etiqueta y el campo en cada fila */
.form-control {
display: flex;
flex-direction: row; /* Coloca label e input en la misma fila */
align-items: center; /* Alinea verticalmente */
margin-bottom: 20px; /* Espacio entre las filas */
gap: 15px; /* Espacio entre el label y el input */
}
/* Estilo para el label (le damos un ancho fijo para alineación) */
.form-control label {
width: 150px; /* Ancho fijo para los labels */
flex-shrink: 0; /* Evita que el label se encoja */
text-align: right; /* Alinea el texto del label a la derecha */
font-weight: 600;
}
/* Estilo para todos los campos de entrada */
.form-control input[type="text"],
.form-control input[type="email"],
.form-control input[type="search"],
.form-control input[type="url"],
.form-control textarea {
flex-grow: 1; /* Permite que el input ocupe el espacio restante */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
min-width: 0; /* Evita desbordamiento en Flexbox */
}
/* Estilo específico para el área de texto (Mensaje) */
.form-control textarea {
resize: vertical; /* Permite redimensionar solo verticalmente */
}
/* Estilo para el contenedor del botón (centrado) */
.form-actions {
text-align: center;
margin-top: 30px;
}
/* Estilo para el botón de envío */
.form-actions button[type="submit"] {
padding: 12px 30px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.form-actions button[type="submit"]:hover {
background-color: #0056b3;
}
/* Limitar el formulario a un ancho moderado a la derecha */
#contactForm {
/* El ancho es el "average side" que solicitas (400px es un buen tamaño) */
width: 100%;
max-width: 400px;
padding: 30px;
background: #ffffff; /* Fondo blanco para destacar */
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
/* Color de texto para el formulario (si el fondo de la sección es oscuro) */
color: #333;
}
#myform h2 {
color: #007bff; /* Asegura que el título sea visible */
text-align: center;
}
/* Alineación de Label y Input (Reglas de la respuesta anterior, pero reconfirmadas) */
.form-control {
display: flex; /* Usa Flexbox para la fila label-input */
align-items: center;
margin-bottom: 15px;
}
.form-control label {
width: 120px; /* Ancho fijo para las etiquetas (el lado izquierdo de la fila) */
flex-shrink: 0; /* Evita que la etiqueta se encoja */
text-align: left;
padding-right: 15px; /* Espacio entre el label y el campo */
font-weight: 600;
}
.form-control input[type="text"],
.form-control input[type="email"],
.form-control input[type="search"],
.form-control input[type="url"],
.form-control textarea {
flex-grow: 1; /* Permite que el campo ocupe todo el espacio restante */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
/* Asegura que no haya desbordamiento horizontal */
min-width: 0;
}
/* Configuración del Formulario (Ancho Fijo) */
#myform {
/* Mantiene el ancho fijo a la derecha */
width: 100%;
max-width: 400px;
padding-center: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: #333;
}
Valora esta pregunta
0