I have a task until 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 188pixels, I understand that the request is not standard, but I would be very grateful for help and explanations, thank you.
I attach 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>
enter link description here
https://i.stack.imgur.com/VgHZ0.png
2
Answers
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.
The changes I had to make:
I also set a body background temporarily to make the contents more visible. You can remove it.