Перейти к публикации

Вопрос

Доброго вечер народ! Хотел бы спросить, как мне баннер с двумя кнопочками адаптировать?

Наковырял вручную код и css(скопипастен код, сделал под себя), вроде гуд работает, осталось только адаптировать нормально, сколько сам ковырял, так и не догнал как сделать...

Сам css:

#LI_1 {
    background-position: 50% 50%;
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(20, 20, 20);
    height: 300px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    top: 0px;
    width: 1320px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 590.016px 150.961px;
    transform-origin: 590.016px 150.973px;
    caret-color: rgb(20, 20, 20);
    background: rgb(224, 224, 224) url("http://blackrussia.pw/uploads/set_resources_21/50201377_-1300--301.png") repeat scroll 50% 50% / cover padding-box border-box;
    border-top: 0.984375px solid rgb(223, 223, 223);
    border-right: 0.984375px solid rgb(216, 216, 216);
    border-bottom: 0.984375px solid rgb(203, 203, 203);
    border-left: 0.984375px solid rgb(216, 216, 216);
    border-radius: 15px 15px 15px 15px;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    margin: auto;
    outline: rgb(20, 20, 20) none 0px;
    padding: 299.977px 0px 0px;
}/*#LI_1*/

#LI_1:after {
    clear: both;
    color: rgb(20, 20, 20);
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 0px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#LI_1:after*/

#LI_1:before {
    color: rgb(20, 20, 20);
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 0px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#LI_1:before*/

#DIV_2 {
    box-sizing: border-box;
    color: rgb(20, 20, 20);
    height: 19.9688px;
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 1178.06px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 589.031px 9.98438px;
    transform-origin: 589.031px 9.98438px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
    padding: 10px;
}/*#DIV_2*/

#DIV_2:after {
    color: rgb(20, 20, 20);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    column-rule-color: rgb(20, 20, 20);
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#DIV_2:after*/

#DIV_2:before {
    color: rgb(20, 20, 20);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    column-rule-color: rgb(20, 20, 20);
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#DIV_2:before*/

#A_3 {
    bottom: 5px;
    box-sizing: border-box;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: #ffffff;
    display: block;
    height: 40px;
    left: 9.98438px;
    letter-spacing: -1px;
    overflow-wrap: break-word;
    position: absolute;
    right: 903.094px;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    top: 215.016px;
    width: 235px;
    column-rule-color: rgb(37, 119, 177);
    perspective-origin: 124.992px 19.9922px;
    transform-origin: 124.992px 19.9922px;
    caret-color: rgb(37, 119, 177);
    background: linear-gradient(to right, #ff5858, #f09819, #ff5858);
    border: 0px none rgb(37, 119, 177);
    border-radius: 10px 10px 10px 10px;
    font: normal normal 700 normal 20px / 40px Cuprum;
    list-style: none outside none;
    margin: 0px 0px 40px 200px;
    outline: rgb(37, 119, 177) none 0px;
    transition: all 0.5s ease 0s;
}/*#A_3*/

#A_3:after {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_3:after*/

#A_3:before {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_3:before*/

#A_4 {
    bottom: 5px;
    box-sizing: border-box;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: #ffffff;
    display: block;
    height: 39.9844px;
    left: 9.98438px;
    letter-spacing: -1px;
    overflow-wrap: break-word;
    position: absolute;
    right: 728.086px;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    top: 215.016px;
    width: 150px;
    column-rule-color: rgb(37, 119, 177);
    perspective-origin: 75px 19.9922px;
    transform-origin: 75px 19.9922px;
    caret-color: rgb(37, 119, 177);
    background: linear-gradient(to right, #ff5858, #f09819, #ff5858);
    border: 0px none rgb(37, 119, 177);
    border-radius: 10px 10px 10px 10px;
    font: normal normal 700 normal 20px / 40px Cuprum;
    list-style: none outside none;
    margin: 0px 0px 40px 490px;
    outline: rgb(37, 119, 177) none 0px;
    transition: all 0.5s ease 0s;
}/*#A_4*/

#A_4:after {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_4:after*/

#A_4:before {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_4:before*/

Четсно говоря, я понимаю что в этом коде много лишнего.. Может подскажете до какого момента его сократить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

@.V.I.P. Об этом не задумывался, попробую и отпишусь..

  • Лайк 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Guest
Ответить на вопрос...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.


  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...