网页表单布局调整技术求助：实现表单居左+右侧文本的页面布局

Hey there! Let's get your form moved to the left side of the screen and add the Lorem Ipsum text on the right. I've adjusted your HTML and CSS to make this work smoothly—here's what I changed:

Key Modifications #

• Added a flex container (main-container) to wrap both the form and the right-side text, which makes it easy to split the page into two responsive columns
• Updated form element widths to fit properly within the left column (replacing fixed screen percentages with relative widths that adapt to the container)
• Added a dedicated section for the right-side text with styling that matches your site's dark theme
• Fixed small typos in your original CSS (like missing px units and incorrect opacity values)
• Removed deprecated <center> tags in favor of modern CSS alignment techniques

Modified CSS #

@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap');
body { 
  background-color: #1c1c1c; 
  margin: 0;
  padding: 0;
}
/* HEADER */
header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 4.5rem; 
  line-height: 4.5rem; 
  background-color: #111111; 
  box-shadow: 0 0 0.5rem 0 rgb(17 17 17 / 70%); 
  cursor: default; 
  z-index: 10000; 
}
nav { 
  position: absolute; 
  top: 0; 
  right: 2rem; 
}
ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}
li { 
  position: relative; 
  display: inline-block; 
  margin: 0 0.75rem; 
  padding: 0; 
}
img.Logo1 { 
  position: absolute; 
  margin-top: 5px; 
  height: 55px; 
  transition-duration: 0.3s; 
}
img.Logo2 { 
  position: relative; 
  margin-top: 5px; 
  height: 55px; 
  opacity: 0; 
  transition-duration: 0.3s; 
}
img.Logo2:hover { 
  opacity: 1; 
}
a.botoes_menu { 
  text-decoration: none; 
  font-family: 'Baloo 2', cursive; 
  color: white; 
  font-size: 18px; 
  line-height: 1.3; 
  letter-spacing: -1.5px; 
  transition-duration: 0.3s; 
}
a.botoes_menu:hover { 
  color: #a480ff; 
}
/* TITULO */
h2.Titulo { 
  font-family: 'Overpass', sans-serif; 
  color: white; 
  padding-top: 110px; 
  font-size: 36px; 
  line-height: 1.3; 
  letter-spacing: -1.5px; 
  margin: 0 auto 10px;
  text-align: center;
}
hr.Degrade { 
  margin: -13px auto 40px; 
  border: none; 
  border-radius: 15px; 
  width: 14rem; 
  height: 4px; 
  background-image: linear-gradient(90deg, #a480ff, #532eaf); 
}
/* MAIN LAYOUT */
.main-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4rem;
  padding: 0 2rem;
}
.form-section {
  flex: 1;
}
.text-section {
  flex: 1;
  color: white;
  font-family: 'Overpass', sans-serif;
  line-height: 1.6;
  padding-top: 10px;
}
/* FORM STYLES */
input.caixa { 
  color: white; 
  width: 48%; 
  height: 36px; 
  margin-right: 2%; 
  margin-bottom: 20px; 
  border: solid 1.5px #EBEBEB; 
  border-radius: 5px; 
  background-color: #1c1c1c; 
  box-sizing: border-box;
}
textarea { 
  padding-top: 7px; 
  color: white; 
  width: 100%; 
  height: 235px; 
  margin-bottom: 20px; 
  border: solid 1.5px #EBEBEB; 
  border-radius: 5px; 
  background-color: #1c1c1c; 
  transition-duration: 0.3s; 
  box-sizing: border-box;
}
textarea:focus, input:focus, select:focus { 
  transition-duration: 0.3s; 
  box-shadow: 0 0 0 0; 
  border: solid 2.5px #532eaf; 
  outline: 0; 
}
::placeholder { 
  text-align: center; 
  color: #cccccc; 
  font-family: 'Overpass', sans-serif; 
}
/* CHECKBOX */
.container { 
  font-family: 'Overpass', sans-serif; 
  color: white; 
  display: inline-block; 
  position: relative; 
  margin-left: 17px; 
  padding-top: 3px; 
  padding-left: 30px; 
  cursor: pointer; 
  font-size: 15px; 
}
.container input { 
  opacity: 0; 
  cursor: pointer; 
}
.checkmark { 
  transition-duration: 0.3s; 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 25px; 
  width: 25px; 
  background-color: #eee; 
  border-radius: 50%; 
}
.container:hover input~.checkmark { 
  transition-duration: 0.3s; 
  background-color: #ccc; 
}
.container input:checked~.checkmark { 
  transition-duration: 0.3s; 
  background-color: #532eaf; 
}
.checkmark:after { 
  transition-duration: 0.3s; 
  content: ""; 
  position: absolute; 
  display: none; 
}
.container input:checked~.checkmark:after { 
  transition-duration: 0.3s; 
  display: block; 
}
.container .checkmark:after { 
  transition-duration: 0.3s; 
  top: 9px; 
  left: 9px; 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: white; 
}
/* SUBMIT BUTTON */
input.botão { 
  margin-top: 17px; 
  cursor: pointer; 
  border-radius: 20px; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  padding-left: 35px; 
  padding-right: 35px; 
  color: white; 
  border: none; 
  background-color: #532eaf; 
  transition-duration: 0.3s; 
}
input.botão:hover { 
  color: #ccc; 
  background-color: #2a0e70; 
}

Modified HTML #

<html>
<head>
<title>Contato - xCUELHO</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="Style_Contato.css">
</head>
<body>
<!-- HEADER -->
<header class="header">
<a class="logo" href="index.html">
<div class="CaixaLogo" style="text-align:center;">
<img class="Logo1" src="Logo.png">
<img class="Logo2" src="Logo2.png">
</div>
</a>
<nav>
<ul>
<li><a class="botoes_menu" href="index.html">Home</a></li>
<li><a class="botoes_menu" href="Preços.html">Preços</a></li>
<li><a class="botoes_menu" href="Contato.html">Contato</a></li>
</ul>
</nav>
</header>
<!-- TITULO -->
<h2 class="Titulo">Contato</h2>
<hr class="Degrade">
<!-- MAIN CONTENT -->
<div class="main-container">
  <!-- FORM SECTION -->
  <div class="form-section">
    <form method="post" action="Resultados.php">
      <input class="caixa" type="text" name="Nome" placeholder="Nome">
      <input class="caixa" type="email" name="email" placeholder="Email"><br>
      <textarea style="resize: vertical;" placeholder="Mensagem" name="area"></textarea><br>
      <label class="container"> Compra
        <input type="radio" checked="checked" name="radio">
        <span class="checkmark"></span>
      </label>
      <label class="container"> Outro
        <input type="radio" name="radio">
        <span class="checkmark"></span>
      </label>
      <br/>
      <input class="botão" type="submit" value="Enviar">
    </form>
  </div>
  <!-- TEXT SECTION -->
  <div class="text-section">
    <h3>Sobre Nós</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
</div>
</body>
</html>

Quick Additional Notes #

• The main-container uses max-width and margin: 0 auto to keep content centered and prevent it from stretching too wide on large screens
• box-sizing: border-box ensures form element widths include padding and borders, so they don't overflow their container
• The flex layout will automatically adjust to smaller screens (you can add a media query later if you want to stack the columns on mobile)

内容的提问来源于stack exchange，提问作者xCUELHO