сверстал две вариации order

This commit is contained in:
Kirill Pet
2024-11-15 21:01:36 +03:00
parent 2c3f548e83
commit a69899b2be
4 changed files with 212 additions and 13 deletions

View File

@@ -326,8 +326,10 @@
</form>
<div class="order-contacts__delivery">
<div class="modal-map__control" data-content="modal-map__address">
<button class="modal-map-control__item">
<p class="order__title">Доставка</p>
<div class="modal-map__control modal-map__control--delivery" data-content="modal-map__address">
<button class="modal-map-control__item active">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@@ -342,7 +344,7 @@
</div>
</button>
<button class="modal-map-control__item active">
<button class="modal-map-control__item ">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@@ -359,11 +361,69 @@
</div>
<div class="modal-map__address">
<div class="remote-control__item">
1
</div>
<div class="remote-control__item active">
2
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
<label for="firstname" class="label-name">Пункт выдачи</label>
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите пункт выдачи" required="" readonly>
</div>
</div>
</div>
<div class="remote-control__item">
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
<label for="firstname" class="label-name">Адрес доставки</label>
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите адрес доставки" required="" readonly>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="order-contacts-deliver__date">
<div class="form-input__radio remote-control__item active">
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 18-22 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">3 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
</div>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для служьы доставки" required="" ></textarea>
</div>
</div>
</div>
</div>
</div>
@@ -436,10 +496,38 @@
<div class="order-your__calculation">
<form action="" class="order-your__promo">
<input id="firstname" class="form__input order-your-promo__input" type="text" name="name" placeholder="Промокод" required="">
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Промокод" required="">
<input type="submit" value="Применить" class="button button--white button--red-48-px active order-your-promo__button">
</form>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Товары</p>
<p class="order-your-calculation__value order-your-calculation__value--price">10560</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Скидка</p>
<p class="order-your-calculation__value order-your-calculation__value--price order-your-calculation__value--discount">1280</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Доставка</p>
<p class="order-your-calculation__description">Введите адрес доставки</p>
</div>
<hr class="order-your-calculation__line">
<div class="order-your-calculation__item">
<p class="order-your-calculation__result">Итого</p>
<p class="order-your-calculation__result order-your-calculation__value--price">8960</p>
</div>
<div class="order-your-calculation__submit">
<button class="button button--gradient button--high button--100-perc">
Оплатить
</button>
</div>
</div>
</div>
</div>