Search code examples
htmlcssflexbox

Positioning of form block and text block with photo

I have a task due tomorrow to make a section on the layout. Now, I am just starting to learn and do not really understand what to do in the full view. I have been sitting on this task for so long that I do not understand anything at all. I need to put the form on the right and the text on the left with an indentation between them that is 188 pixels wide. I understand that the request is not standard, but I would be very grateful for any help and explanation. Thank you.

I have attached a link to the CodePen and some screenshots. Thank you in advance.

:root {
  /* Colors */
  --black-cl: #11131f;
  --dark-cl: #1f212d;
  --light-grn-cl: #93abae;
  --white-cl: #f6f5ef;
  --hover-cl: #88b3b9;
  --grey-cl: rgba(246, 245, 239, 0.5);
  --linear-gradient: linear-gradient(#bec7c2 0%, #a1b5ba 100%);
  /* The main number of elements in Flexbox grid */
  --items: 3;
  /* The main gap indent in Flexbox grid */
  --indent: 16px;
  /* Transition settings */
  --main-transition-function: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.rent-yacht-heading {
  width: 282px;
  height: 132px;
  color: var(--white-cl);
  font-family: DM Sans;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 66px;
  letter-spacing: -2.7px;
  margin-bottom: 64px;
}

.rent-yacht-form-container,
.rent-yacht-textarea-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.rent-yacht-input {
  background-color: inherit;
  border: 0;
  outline: 0;
  border-bottom: 1px solid var(--white-cl);
  width: 443px;
  height: 35px;
  color: var(--white-cl);
}

.rent-yacht-input::placeholder,
.rent-yacht-textarea::placeholder {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 19.2px;
  letter-spacing: -0.72px;
  color: var(--white-cl);
}

.rent-yacht-textarea {
  background-color: inherit;
  width: 443px;
  height: 77px;
  resize: none;
  border: 0;
  outline: 0;
  border-bottom: 1px solid var(--white-cl);
  color: var(--white-cl);
}

.rent-yacht-send-button {
  width: 132px;
  height: 48px;
  display: flex;
  padding: 14px 28px;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  border: 1px solid var(--white-cl);
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.81px;
  margin-top: 64px;
  color: var(--main-white-cl);
  background-color: inherit;
}

.send-arrows-icon {
  fill: var(--white, #f6f5ef);
  margin-left: 16px;
}

.rent-yacht-image,
.rent-yacht-form-container {
  width: calc(50% - 188px);
}

<section class="rent-yacht-section">
  <div class="rent-yacht-block container">
    <div class="rent-yacht-image">
      <h3 class="rent-yacht-heading">Rent a yacht now</h3>
      <img src="../img/rent/[email protected]" alt="Rent yacht now" class="rent-yacht-img" />
    </div>
    <div class="rent-yacht-form-container">
      <form class="rent-yacht-form">
        <div class="rent-yacht-form-container">
          <label for="user-name" class="rent-yacht-input-label"></label>
          <div class="rent-yacht-input-container">
            <input type="text" placeholder="Full Name" name="user-name" id="user-name" class="rent-yacht-input" />
          </div>
        </div>
        <div class="rent-yacht-form-container">
          <label for="user-email" class="rent-yacht-input-label"></label>
          <div class="rent-yacht-input-container">
            <input type="email" placeholder="Email" class="rent-yacht-input" />
          </div>
        </div>
        <div class="rent-yacht-form-container">
          <label for="user-phone" class="rent-yacht-input-label"></label>
          <div class="rent-yacht-input-container">
            <input type="tel" placeholder="Phone Number" class="rent-yacht-input" />
          </div>
        </div>
        <div class="rent-yacht-textarea-container">
          <label for="user-comment" class="rent-yacht-input-label"></label>
          <textarea
            name="user-comment"
            id="user-comment"
            cols="30"
            rows="10"
            placeholder="Comment"
            class="rent-yacht-textarea"
          ></textarea>
        </div>
        <button class="rent-yacht-send-button" type="submit">
          Send<svg class="send-arrows-icon" width="18" height="8">
            <use href="../img/icons.svg#icon-arrow-right"></use>
          </svg>
        </button>
      </form>
    </div>
  </div>
</section>

Example

Another Example

Solution

  • Here's what you need to do:

    Adjust the CSS styles for the "rent-yacht-image" and "rent-yacht-form-container" classes to have a width of 50% minus the 188-pixel indentation. This will ensure that the form and text occupy half of the container each.

    Add CSS styles to create a gap between the "rent-yacht-image" and "rent-yacht-form-container". We'll use the "margin-right" property for the "rent-yacht-image" class.

    Ensure that both the "rent-yacht-image" and "rent-yacht-form-container" elements are displayed side by side using the "display: flex" property.

    .rent-yacht-image,
.rent-yacht-form-container {
  width: calc(50% - 188px);
}

.rent-yacht-image {
  margin-right: 188px; /* Add a gap between the image and the form */
}

.rent-yacht-section {
  display: flex; /* Ensure the elements are displayed side by side */
}

.rent-yacht-block {
  display: flex;
}

.rent-yacht-form-container,
.rent-yacht-textarea-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}