Как поместить цвет фона за форму?

Я могу получить желаемый стиль с моими текстовыми элементами, но не с моей формой. Раньше я пытался добиться этого на веб-сайте с макетами, над которым я работал, и решил просто попробовать это с чистого листа. Как видите, я могу получить цвет фона на экране, но теперь он складывается. Я начал смотреть на структуру своего HTML и не могу придумать ничего, что могло бы привести к результату, который я получаю. Красный, противоположный самой форме, находится в столбце, и у меня есть столбец flex-direction в моей «форме» в моем css, так что, может быть, это структура, и я что-то упускаю? Помощь будет высоко оценена и спасибо заранее!

Что выдает мой код

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');

/* page style */

* {
  box-sizing: border-box;
}

#contact-page {
  font-family: 'Raleway';
  background: #464B59;
}

/* contact grid (container) */

.contact-grid {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100vh;
  
}

/* contact-info */

.contact-info {
  background: white;
  padding: 80px;
  max-width: 500px;
  text-align: center;
  width: 200;
}

.contact-info h2 {
  font-size: 40px;
}

/* form */

.form {
  width: 400px;
  height: 500px;
  border: green 2px solid;
  background: red;
  background-size: cover;
  background-position: center;
}

form {
  display: flex;
  flex-direction: column;

}

<!DOCTYPE html>
<html lang = "en">
<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">
  <link rel = "stylesheet" href = "style.css">
  <title>contact</title>
</head>
<body id = "contact-page">

  <div class = "contact-grid">
  
    <div class = "contact-info">
      <h2>get in touch</h2>
      <hr>
      <p>The best way to reach me directly is via Linkden.</p>
      <p>If you are looking inquire proffesionally please fill out the contact form and I will get back to you as soon as I can.</p>
      <p>Thank you & have a wonderful day</p>
    </div>

    <div class = "form">
      <form action = "https://formsubmit.co/[email protected]" method = "POST">
        <input type = "text" name = "name" required placeholder = "name">
        <input type = "email" name = "email" required placeholder = "email">
        <textarea name = "message" id = "" cols = "30" rows = "10" placeholder = "message"></textarea>
        <button type = "submit">Send</button>
      </form>
    </div>
  </div>

</body>
</html>

Примените «фон: красный;» в селекторе (формы), а не в селекторе класса (.form). и если это помогло удалить вопрос, пожалуйста.

— 20.03.2022 07:40

.form { ширина: 400 пикселей; высота: 500 пикселей; граница: зеленая сплошная 2 пикселя; высота: максимальное содержание; ширина: максимальное содержание; } форма { дисплей: гибкий; flex-направление: столбец; цвет фона: красный; }

— 20.03.2022 07:47

html css

20.03.2022 07:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');

/* page style */

* {
  box-sizing: border-box;
}

#contact-page {
  font-family: 'Raleway';
  background: #464B59;
}

/* contact grid (container) */

.contact-grid {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100vh;
  
}

/* contact-info */

.contact-info {
  background: white;
  padding: 80px;
  max-width: 500px;
  text-align: center;
}

.contact-info h2 {
  font-size: 40px;
}

/* form */

.form {
  width: 600px;
  padding:20px;
  border: green 2px solid;
  background: red;
  background-size: cover;
  background-position: center;
}

form {
  display: flex;
  flex-direction: column;
}
form input{
  padding: 10px;
  margin-bottom: 20px;
}
form textarea{
  padding: 10px;
  margin-bottom: 10px;
}
form button{
  padding: 10px;
}

<!DOCTYPE html>
<html lang = "en">
<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">
  <link rel = "stylesheet" href = "style.css">
  <title>contact</title>
</head>
<body id = "contact-page">

  <div class = "contact-grid">
  
    <div class = "contact-info">
      <h2>get in touch</h2>
      <hr>
      <p>The best way to reach me directly is via Linkden.</p>
      <p>If you are looking inquire proffesionally please fill out the contact form and I will get back to you as soon as I can.</p>
      <p>Thank you & have a wonderful day</p>
    </div>

    <div class = "form">
      <form action = "https://formsubmit.co/[email protected]" method = "POST">
        <input type = "text" name = "name" required placeholder = "name">
        <input type = "email" name = "email" required placeholder = "email">
        <textarea name = "message" id = "" cols = "30" rows = "10" placeholder = "message"></textarea>
        <button type = "submit">Send</button>
      </form>
    </div>
  </div>

</body>
</html>

спасибо Суреш. Я не могу проголосовать за это, потому что моя репутация низкая, но это сработало. благодарю вас.

— 21.03.2022 02:17

Не волнуйся, брат!

— 28.03.2022 16:44

20.03.2022 07:54