input fields with legend
-
I'm trying to get over the assignment. Requirement to use flex and fieldset. I know I have to hide this fieldet, and I think he's got some sort of marking that gives me the opportunity to put a headline through the label.
Below the picture.
That's what I did.
.reserve__bottom-list { display: flex; justify-content: space-around; }.reserve__list-bottom-double {
padding-top: 22px;
}.reserve__list-bottom {
list-style: none;
}.reserve__item-bottom input {
height: 52px;
}.reserve__name {
width: 292px;
}.reserve__list-bottom input:focus {
outline: none;
border: #CD06FF 2px solid;
}.reserve__list-bottom input:active {
outline: none;
border: 2px #CD06FF solid;
}.reserve__name-bottom {
font-size: 14px;
line-height: 16px;
}.reserve__name-double {
height: 52px;
margin-bottom: 36px;
}.reserve__item-left {
margin-right: 26px;
}.reserve__name-double {
width: 126px;
}.reserve__name-solo {
width: 292px;
}.reserve__fieldset-right {
display: flex;
}.reserve__button-bottom {
color: #6C0287;
padding: 16px 50px;
font-size: 22px;
font-weight: bold;
line-height: 28px;
border-radius: 10px;
}<fieldset class="reserve__fieldset reserve__bottom-list">
<fieldset class="reserve__fieldset reserve__fieldset-left">
<ul class="reserve__list-bottom reserve__list-bottom-double">
<li class="reserve__item-bottom reserve__item-bottom-double">
<input class="reserve__name-double reserve__item-left" type="number" name="date" min="1" max="31" placeholder="Дата">
<input class="reserve__name-double reserve__item-right" type="number" name="time" min="9" max="20" step="1" placeholder="Время">
</li>
<li class="reserve__item-bottom">
<input class="reserve__name-solo" type="number" name="people" placeholder="Сколько человек" min="1" max="">
</li>
</ul>
</fieldset>
<fieldset class="reserve__fieldset reserve__fieldset-right">
<ul class="reserve__list-bottom">
<li class="reserve__item-bottom">
<label class="reserve__name-bottom" for="name">Имя</label>
<input class="reserve__name" type="name" name="name" required>
<label class="reserve__name-bottom" for="second_name">Фамилия</label>
<input class="reserve__name" type="name" name="second_name">
</li>
</ul>
<ul class="reserve__list-bottom">
<li class="reserve__item-bottom">
<label class="reserve__name-bottom" for="tel">Телефон</label>
<input class="reserve__name" type="tel" name="tel" required>
<label class="reserve__name-bottom" for="email">E-mail</label>
<input class="reserve__name" type="email" name="email" required>
</li>
<li class="reserve__item-bottom">
<button class="reserve__button-bottom" value="order">ЗАБРОНИРОВАТЬ</button>
</li>
</ul>
</fieldset>
</fieldset>
-
...the requirement to apply flex and fieldset.
Start the snipe, turn the whole page and change the shape, grab the right bottom corner:
form { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 30px; min-width: min-content; max-width: max-content; padding: 20px; background-color: #440f51; /* Only fo example --> */ overflow: hidden; resize: horizontal; }fieldset {
position: relative;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
gap: 20px;
width: 190px;
padding: 0;
border: none;
}fieldset label {
position: absolute;
font: bold 8px/1em sans-serif;
color: #fff;
}
label:nth-of-type(1) { top: -10px; }
label:nth-of-type(2) { top: 44px; }input {
padding: 7px 14px;
height: 34px; width: 84px;
border: none;
border-radius: 1px;
box-sizing: border-box;
font: 10px/1em sans-serif;
}
input:not([type="date"]):not([type="time"]) {
width: 100%;
}
input[type="button"] {
display: grid;
place-items: center;
color: #6c0287;
font: bold 12px/1em sans-serif;
border-radius: 8px;
}
input:active,
input:focus {
outline: none;
box-shadow: inset 0 0 1px 2px #cd06ff;
}<form>
<fieldset>
<input type="date" name="date" placeholder="Дата">
<input type="time" name="time" placeholder="Время">
<input type="number" name="people" min="1" placeholder="Сколько человек">
</fieldset>
<fieldset>
<label for="name">Имя</label>
<input type="name" name="name" required>
<label for="second_name">Фамилия</label>
<input type="name" name="second_name">
</fieldset>
<fieldset>
<label for="tel">Телефон</label>
<input type="tel" name="tel" required>
<label for="email">E-mail</label>
<input type="email" name="email" required>
<input type="button" value="ЗАБРОНИРОВАТЬ">
</fieldset>
</form>BAM and a bunch of wrappers won't make a miracle. Carefully analyse the marking and the style - as simple as possible and close to the desired outcome.
