Initial commit

1 year ago · cbe858bff3
commit cbe858bff3
2 changed files with 155 additions and 0 deletions
--- a/grid.css
+++ b/grid.css
@ -0,0 +1,102 @@
 body {
  background: hsl(0deg 100% 100%);
  padding: 0;
  margin: 0;
 }
 .payment {
  --padding: 4px;
  position: relative;
  padding: var(--padding);
  border: 1px solid hsl(210deg 10% 40%);
  border-radius: 8px;
  gap: 8px;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1rem 1fr;
  grid-row-gap: 15px;
 }
 .title_wrapper {
  --padding: 4px;
  position: relative;
  padding: var(--padding);
  border-radius: 8px;
  gap: 8px;
  height: 4vh;
  height: 4svh;
  display: grid;
  grid-area: span 2/span 1;
  grid-template-columns: 1fr;
  grid-template-rows: 1rem 1rem;
  grid-row-gap: 15px;
 }
 .section_wrapper {
  --padding: 4px;
  position: relative;
  padding: var(--padding);
  border-radius: 8px;
  gap: 8px;
  height: 2vh;
  height: 2svh;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1rem;
  column-gap: 0px;
 }
 .section_header {
  display: grid;
  place-content: center;
  border-radius: 3px;
  background: hsl(0deg 100% 50%);
  color: white;
  font-size: 1.3125rem;
  font-weight: bold;
  grid-row-gap: 15px;
  grid-column-gap: 0px;
 }
 .section_line {
  display: grid;
  place-content: center;
  border-radius: 3px;
  border-top: solid red 3px;
  background: hsl(0deg 100% 100%);
  color: white;
  font-size: 1.3125rem;
  font-weight: bold;
  grid-row-gap: 15px;
  grid-column-gap: 0px;
 }
 .payer {
  --padding: 4px;
  position: relative;
  padding: var(--padding);
  border: 1px solid hsl(210deg 10% 40%);
  border-radius: 8px;
  gap: 8px;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1rem 1rem 1rem 1rem;
  grid-row-gap: 15px;
 }
 .child {
  display: grid;
  margin-bottom: 1px;
  place-content: self-start center;
  border-radius: 3px;
  background: hsl(0deg 100% 100%);
  color: black;
  font-size: 1.3125rem;
  font-weight: bold;
 }
 .title {
  display: grid;
  place-content: center;
  border-radius: 3px;
  background: hsl(0deg 100% 100%);
  color: black;
  font-size: 1.3125rem;
  font-weight: bold;
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Форма платежа по форме банка</title>
    <link rel="stylesheet" href="grid.css">
  </head>
  <body>
    <div class="payment">
        <div class="title_wrapper">
            <div class="title">Рублевый перевод на счета других клиентов или в другие банки, включая налоговые платежи</div>
            <div class="title">№2 от 03.07.2024</div>
        </div>
        <div class="section_wrapper">
            <div class="section_header">Плательщик</div>
            <div class="section_line"></div>
        </div>
        <div class="payer">
            <div class="child">Плательщик:</div>
            <div class="child">Шигорина Наталья Николаевна 00234052</div>
            <div class="child">Номер счета:</div>
            <div class="child">
              <select>
                <option>12321</option>
                <option>12322</option>
                <option>12323</option>
              </select>
            </div>
            <div class="child">ИНН:</div>
            <div class="child">123456789123</div>
            <div class="child">Сумма:</div>
            <div class="child">
              <span>
              <input value="0-00"></input>
              RUB</span>
            </div>
            <div class="child">Телефон или электронный адрес:</div>
            <div class="child">+7-4942326120 schnn@mail.ru</div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child">Адрес места жительства:</div>
            <div class="child">г. Москва, ул. Дмитрия Ульянова 158/1, кв. 12</div>
            <div class="child">Комиссии и расходы:</div>
            <div class="child">
              <select>
                <option>OUR</option>
              </select>
            </div>
        </div>
    </div>
  </body>
 </html>