# Модуль баннеров ссылок на автоматизированные информационные системы

<div class="new-payments" id="bkmrk-%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82-1"><div class="grid-wrap"><div class="grid-wrap__row grid-wrap__row--nowrap-lg"><div class="grid-wrap__col-lg-8 grid-wrap__col-md-12 grid-wrap__col-sm-6 md-offset-bottom-24 sm-offset-bottom-24">  
</div></div></div></div>[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-09/scaled-1680-/KPIimage.png)](https://book.mylbt.ru/uploads/images/gallery/2024-09/KPIimage.png)

Авторизуемся на сайте через ЕСПД

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/eWCimage.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/eWCimage.png)

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/sl9image.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/sl9image.png)

В блоке управления сайтом жмем кнопку добавить блок

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/7F3image.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/7F3image.png)

В блоке содержимое тычем в пиктограмму исходный код

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/zfaimage.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/zfaimage.png)

Вставляем код блока баннеров-ссылок АИС

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/Qebimage.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/Qebimage.png)

Жмем кнопку сохранить

[![image.png](https://book.mylbt.ru/uploads/images/gallery/2024-04/scaled-1680-/TPPimage.png)](https://book.mylbt.ru/uploads/images/gallery/2024-04/TPPimage.png)

Исходный код блока баннеров-ссылок АИС

```html
<style>
.new-payments {
padding-top: 32px;
padding-bottom: 48px;
}
.grid-wrap {
margin-left: auto;
margin-right: auto;
position: relative;
width: 85%;
}
.grid-wrap__row-sm--full-width {
margin-left: 0;
margin-right: 0;
}
.grid-wrap__col-sm-full-width {
width: 100%;
}
.grid-wrap__col-sm-auto {
width: auto;
}
.grid-wrap__col-sm-1 {
width: 16.66667%;
}
.grid-wrap__col-offset-sm-1 {
margin-left: 16.66667%;
}
.grid-wrap__col-sm-2 {
width: 33.33333%;
}
.grid-wrap__col-offset-sm-2 {
margin-left: 33.33333%;
}
.grid-wrap__col-sm-3 {
width: 50%;
}
.grid-wrap__col-offset-sm-3 {
margin-left: 50%;
}
.grid-wrap__col-sm-4 {
width: 66.66667%;
}
.grid-wrap__col-offset-sm-4 {
margin-left: 66.66667%;
}
.grid-wrap__col-sm-5 {
width: 83.33333%;
}
.grid-wrap__col-offset-sm-5 {
margin-left: 83.33333%;
}
.grid-wrap__col-sm-6 {
width: 100%;
}
.grid-wrap__col-offset-sm-6 {
margin-left: 100%;
}
.new-payment-item {
background: #FFF;
box-shadow: 0 24px 48px 0 rgba(230, 235, 245, 0.40), 0 1px 4px 0 #E3EBFC;
border-radius: 12px;
padding: 154px 24px 24px;
position: relative;
display: block;
min-height: auto;
text-decoration: none;
}
.payment-icon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 154px;
border-radius: 12px 12px0 0;
background-position: center;
text-align: center;
overflow: hidden;
padding-top: 24px;
}
.payment-icon img {
    position: relative;
    width: 130px;
    height: auto;
}
.new-payment-item-header {
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    margin-top: 2em;
    text-align: center;
}
.new-payment-item-description {
font-size: 16px;
line-height: 24px;
margin-top: 12px;
text-align: center;
}
.align-center {
  text-align: center;
}
.emergency-page-wrap {
background: #FAFCFF;
min-height: 100vh;
height: auto;
width: 100%;
display: flex;
flex-direction: column;
}
.main {
flex: 1 0 auto;
}
.full-content.hide {
display: none;
}
.full-content {
padding-top: 8px;
padding-left: 32px;
font-size: 16px;
line-height: 24px;
}
.full-content p {
padding: 0;
font-size: 16px;
line-height: 24px;
}
.full-content ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
.full-content ul li {
position: relative;
margin-bottom: 12px;
padding-left: 20px;
font-size: 16px;
line-height: 24px;
}
.full-content ul li:before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 2px;
border-radius: 1px;
background-color: #4D83FA;
} 
.full-content ul li:last-child {
margin-bottom: 0;
}
.toggle {
position: relative;
padding-left: 32px;
display: inline-block;
}
.toggle svg {
position: absolute;
top: 0;
left: 0;
}
.toggle.opened svg {
transform: rotate(180deg);
}
@media all and (min-width: 768px) and (max-width: 1190px) {
.new-payment-item-description.dk {
display: none;
}
.new-payment-item-description.tablet {
display: block;
}
.new-payment-item-description.mob {
display: none;
}
.main-navigation {
height: 60px;
display: flex;
}
.grid-wrap {
max-width: 1135px;
width: 85%;
}
.grid-wrap__col-md-1 {
width: 8.33333%;
}
.grid-wrap__col-offset-md-1 {
margin-left: 8.33333%;
}
.grid-wrap__col-md-2 {
width: 16.66667%;
}
.grid-wrap__col-offset-md-2 {
margin-left: 16.66667%;
}
.grid-wrap__col-md-3 {
width: 25%;
}
.grid-wrap__col-offset-md-3 {
margin-left: 25%;
}
.grid-wrap__col-md-4 {
width: 33.33333%;
}
.grid-wrap__col-offset-md-4 {
margin-left: 33.33333%;
}
.grid-wrap__col-md-5 {
width: 41.66667%;
}
.grid-wrap__col-offset-md-5 {
margin-left: 41.66667%;
}
.grid-wrap__col-md-6 {
width: 50%;
}
.grid-wrap__col-offset-md-6 {
margin-left: 50%;
}
.grid-wrap__col-md-7 {
width: 58.33333%;
}
.grid-wrap__col-offset-md-7 {
margin-left: 58.33333%;
}
.grid-wrap__col-md-8 {
width: 66.66667%;
}
.grid-wrap__col-offset-md-8 {
margin-left: 66.66667%;
}
.grid-wrap__col-md-9 {
width: 75%;
}
.grid-wrap__col-offset-md-9 {
margin-left: 75%;
}
.grid-wrap__col-md-10 {
width: 83.33333%;
}
.grid-wrap__col-offset-md-10 {
margin-left: 83.33333%;
}
.grid-wrap__col-md-11 {
width: 91.66667%;
}
.grid-wrap__col-offset-md-11 {
margin-left: 91.66667%;
}
.grid-wrap__col-md-12 {
width: 100%;
}
.grid-wrap__col-offset-md-12 {
margin-left: 100%;
}
.md-offset-bottom-24 {
margin-bottom: 24px;
}
.md-offset-top-24 {
margin-top: 24px;
}
.new-payment-item {
min-height: 136px;
box-shadow: 0 24px 48px rgba(230, 235, 245, 0.4);
}
}
@media all and (max-width: 1215px) {
.new-payment-item-description.dk {
display: none;
}
.new-payment-item-description.tablet {
display: none;
}
.new-payment-item-description.mob {
display: block;
}
.sm-offset-top-24 {
margin-top: 24px;
}
.sm-offset-bottom-24 {
margin-bottom: 24px;
}
.main-navigation {
height: 60px;
display: flex;
}
.sm-flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.go-to-portal {
display: block;
width: 100%;
}
.button-wrap {
padding: 16px 0;
}
.button-base {
width: 100%;
text-align: center;
}
}
@media all and (min-width: 1216px) {
.mb-lg-24 {
margin-bottom: 24px;
}
.mb-lg-32 {
margin-bottom: 32px;
}
.mt-lg-40 {
margin-top: 40px;
}
.grid-wrap__row--nowrap-lg {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.grid-wrap {
width: 1216px;
margin-left: auto;
margin-right: auto;
position: relative
}
.grid-wrap__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
grid-gap: 32px;
}
.grid-wrap__row--nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.grid-wrap__col-lg-8 {
width: 29%;
}
.grid-wrap__col-offset-lg-1 {
margin-left: 48px
}
.lg-offset-top-64 {
margin-top: 64px
}
.lg-offset-top-32 {
margin-top: 32px
}
.lg-offset-bottom-24 {
margin-bottom: 24px
}
.lg-offset-top-24 {
margin-top: 24px
}
.lg-offset-top-16 {
margin-top: 16px
}
.lg-h-title-16-big {
font-size: 16px;
line-height: 24px
}
.lg-h-title-14 {
font-size: 14px;
line-height: 20px
}
.lg-h-title-16 {
font-size: 16px;
line-height: 20px
}
.lg-title-20 {
font-size: 20px;
line-height: 24px
}
.new-payments {
padding-top: 40px;
padding-bottom: 64px;
}
.new-payment-item {
box-shadow: 0 24px 48px rgba(230, 235, 245, 0.4);
min-height: 250px;
}
.new-payment-item-description.dk {
display: block;
}
.new-payment-item-description.tablet {
display: none;
}
.new-payment-item-description.mob {
display: none;
}
}
.button-base {
  padding: 14px 40px;
  font: 16px/24px Lato, Arial, sans-serif;
  border-radius: 8px;
  border: 2px solid #0D4CD3;  
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: #0D4CD3;
}

.button-base:hover {
  background: #1D5DEB;
  color: #fff;
}
</style>
<div class="new-payments">
<div class="grid-wrap">
<div class="grid-wrap__row grid-wrap__row--nowrap-lg">
<div class="grid-wrap__col-lg-8 grid-wrap__col-md-12 grid-wrap__col-sm-6 md-offset-bottom-24 sm-offset-bottom-24">
<div class="new-payment-item">
<div class="payment-icon" style="background-image: url('/upload/uf/8a4/nt57kmvywtmecw7kvpwc8tab2oq2fiv6/first_bg.svg');"><img src="/upload/uf/656/pjdg5qva6c6dymybabtqnga06cy8enxo/logo_gos.svg" alt="Единый портал государственных услуг и функций"></div>
<div class="new-payment-item-header align-center">Госуслуги</div>
<div class="new-payment-item-description align-center mb-16 mb-lg-32"><br>Единый портал<br>государственных услуг<br>и функций<br></div>
<p class="align-center mt-0 mb-0 plain-text"><a href="https://gosuslugi.ru/" target="_blank" class="button-base button-small button-long-phone sm-offset-top-24" type="button">Перейти</a></p>
</div>
</div>
<div class="grid-wrap__col-lg-8 grid-wrap__col-md-12 grid-wrap__col-sm-6 md-offset-bottom-24 sm-offset-bottom-24">
<div class="new-payment-item">
<div class="payment-icon" style="background-image: url('/upload/uf/d21/n5ecgvbe3aeynjnjgoa32rsgn4d5thfd/second_bg.svg');"><img src="/upload/uf/727/k03nhm2aat12xpv5zcam0p9qxw932wj7/logo_sgo.svg" alt="Образование Ямала"></div>
<div class="new-payment-item-header align-center">Образование<br>Ямала</div>
<div class="new-payment-item-description align-center mb-16 mb-lg-24">Государственная<br>информационная система<br><br></div>
<p class="align-center mt-0 mb-0 plain-text"><a href="https://sgo.yanao.ru/" target="_blank" class="button-base button-small button-long-phone sm-offset-top-24" type="button">Перейти</a></p>
</div>
</div>
<div class="grid-wrap__col-lg-8 grid-wrap__col-md-12 grid-wrap__col-sm-6 md-offset-bottom-24 sm-offset-bottom-24">
<div class="new-payment-item">
<div class="payment-icon" style="background-image: url('/upload/uf/275/t7pbyi4xtaorpjq011obapd8o0z6opfq/third_bg.svg');"><img src="/upload/uf/295/g27e8sbwjorxhx7rp0hmiys9mwcxow98/gerbrf.svg" alt="Портал образовательных услуг"></div>
<div class="new-payment-item-header align-center">Портал<br>образовательных услуг</div>
<div class="new-payment-item-description align-center mb-16 mb-lg-24">
<p class="mt-0 mb-0">Государственные и муниципальные<br>услуги в сфере образования<br><br></p>
</div>
<p class="align-center mt-0 mb-0 plain-text"><a href="https://e-uslugi.yanao.ru/" target="_blank" class="button-base button-small button-long-phone sm-offset-top-24" type="button">Перейти</a></p>
</div>
</div>
</div>
</div>
</div>
```