Верстка страниц

Задание #1

  • можно использовать шапку и футер из предыдущих занятий;
  • футер прижат к низу;
  • белый фон тянется на всю доступную высоту;
  • кнопки формы прижаты к низу контентной области;
  • инпуты находятся всегда на одном уровне;
  • ссылки при наведении подчеркиваются.

https://goo.gl/M26bKG

Переиспользуемость

.blue-button {
    background-color: blue;
    border: 1px solid blue;
    border-radius: 2px;
    font-size: 16px;
    line-height: 20px;
    color: white;
    padding: 5px 15px;
}

.white-button {
    background-color: white;
    border: 1px solid gray;
    border-radius: 2px;
    font-size: 16px;
    line-height: 20px;
    color: black;
    padding: 5px 15px;
}
.button {
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    font-size: 16px;
    line-height: 20px;
    padding: 5px 15px;
}

.blue-button {
    background-color: blue;
    border-color: blue;
    color: white;
}

.white-button {
    background-color: white;
    border-color: gray;
    color: black;
}

margin: auto

Специальные значения href

<a href="mailto:support@kontur.ru">
    Написать в поддержку
</a>

<a href="tel:8 800 500-70-75">
    8 800 500-70-75
</a>

Задание #2

  • переиспользовать верстку предыдущего макета;
  • ссылки в колонках должны быть на одном уровне.

https://goo.gl/eE1jr1

Ссылки

Практика #4 Верстка страниц

By frontschool-nsk

Source: Valentina Shkarlet

Практика #4 Верстка страниц

  • 129

More from frontschool-nsk