cosmopet--Memento-mori-dev
Kirill Pet 9 months ago
parent c48ab5bc5f
commit 2c3f548e83
  1. 31
      assets/css/gp-style-core.css
  2. 118
      assets/css/gp-style-order.css
  3. 25
      assets/js/gp-form.js
  4. 549
      order.html
  5. 5
      registration.html

@ -304,7 +304,7 @@ button{
.main-menu__item:hover{ .main-menu__item:hover{
opacity: .8; opacity: .8;
background: #f2f2f2; background: var(--background-grey);
border-radius: 24px; border-radius: 24px;
} }
.header.white .main-menu__item:hover .main-menu__link{ .header.white .main-menu__item:hover .main-menu__link{
@ -919,6 +919,31 @@ button{
display: block; display: block;
} }
/* .form-input-radio__ */ /* .form-input-radio__ */
.form-agreement{
display: flex;
}
.form-agreement__check{
display: flex;
align-items: center;
}
.form-agreement__square{
width: 18px;
aspect-ratio: 1;
border-radius: 4px;
border: 2px solid var(--background-black);
}
.form-agreement__label{
margin-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
/* form */ /* form */
@ -1125,7 +1150,7 @@ button{
border-radius: 48px; border-radius: 48px;
} }
.to-know{ .to-know{
width: 100%; /* width: 100%; */
padding: 12px 24px 7px 24px; padding: 12px 24px 7px 24px;
@ -1538,7 +1563,7 @@ button{
display: flex; display: flex;
border-top: 1px solid #f2f2f2; border-top: 1px solid var(--background-grey);
position: relative; position: relative;
} }

@ -0,0 +1,118 @@
.order{
display: flex;
}
.order__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 117%;
text-transform: uppercase;
color: var(--text-black);
}
.order__contacts{
width: calc(50% - 0.5px);
padding: 24px;
border-right: 1px solid #121212;
}
.order-contacts__header{
display: flex;
justify-content: space-between;
align-items: center;
}
.order-contacts__form{
margin-top: 24px;
}
.order-contacts__delivery{
margin-top: 47.5px;
padding-top: 9.5px;
border-top: 1px solid var(--background-grey);
}
.order__your{
width: calc(50% - 0.5px);
padding: 24px 24px 24px 48px;
background: var(--background-grey);
}
.order-your__products{
margin-top: 48px;
}
.order-your-products__item{
margin-top: 16px;
display: flex;
justify-content: space-between;
}
.order-your-products__left{
display: flex;
}
.order-your-products__img{
width: 40px;
aspect-ratio: 1;
border-radius: 16px;
}
.order-your-products__content{
margin-left: 16px;
}
.order-your-products__name{
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.order-your-products__description{
margin-top: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-6);
}
.order-your-products__right{
display: flex;
}
.order-your-products__count{
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
text-align: right;
color: var(--text-6);
}
.order-your-products__count::before{
content: 'x';
}
.order-your-products__price{
margin-left: 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
text-align: right;
color: var(--text-black);
}
.order-your-products__price::after{
content: 'Р';
}
.order-your__calculation{
margin-top: 48px;
}
.order-your__promo{
display: flex;
}
.order-your-promo__input{
border-color: var(--background-9);
}
.order-your-promo__button{
margin-left: 8px;
}
.order-your__

@ -164,9 +164,6 @@ remoteControl('.modal-map__control', '.modal-map-control__item');
function remoteControl(main, button) { function remoteControl(main, button) {
let mains = document.querySelectorAll(main); let mains = document.querySelectorAll(main);
console.log(mains);
mains.forEach(main => { mains.forEach(main => {
let subjectClass = main.dataset.content, let subjectClass = main.dataset.content,
subject = document.querySelector(`.${subjectClass}`), subject = document.querySelector(`.${subjectClass}`),
@ -189,18 +186,18 @@ function remoteControl(main, button) {
}) })
} }
formCheck('.modal-form__content', 'input[type=submit]'); // formCheck('.modal-form__content', 'input[type=submit]');
formCheck('.modal-map__form', 'input[type=submit]'); // formCheck('.modal-map__form', 'input[type=submit]');
function formCheck(form, submit) { // function formCheck(form, submit) {
let forms = document.querySelectorAll(form); // let forms = document.querySelectorAll(form);
forms.forEach(form => { // forms.forEach(form => {
let thisSubmit = form.querySelector(submit); // let thisSubmit = form.querySelector(submit);
thisSubmit.onclick = function () { // thisSubmit.onclick = function () {
form.classList.add('check') // form.classList.add('check')
} // }
}) // })
} // }

File diff suppressed because one or more lines are too long

@ -11,6 +11,7 @@
<!-- Базовые стили --> <!-- Базовые стили -->
<link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0"> <link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0"> <link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
<link rel="stylesheet" href="assets/css/gp-style-order.css?v=1.0">
<!-- Адаптив --> <!-- Адаптив -->
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0"> <link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css"> <link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css">
@ -571,11 +572,11 @@
</div> </div>
</div> </div>
<div class="cabinet-card__download"> <!-- <div class="cabinet-card__download">
<button class="cabinet-card__button"> <button class="cabinet-card__button">
Показать ещё Показать ещё
</button> </button>
</div> </div> -->
</div> </div>
</div> </div>
</main> </main>

Loading…
Cancel
Save