1

Нужно чтобы страница выглядела вот так: example

.work-portfolio__items {
  margin: 0 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 50pt;
}

.work-portfolio__item {
  width: 800px;
  height: 450px;
  overflow: hidden;
  position: relative;
  display: flex;
  padding-top: 50pt;
  background-color: #082121;
  color: #f5f5f5;
  font-size: 15px;
  line-height: 12.5px;
  padding-left: 50pt;
}

.work-portfolio__item::before {
  content: '+';
  font-size: 20px;
  display: block;
  position: absolute;
  bottom: -9px;
  left: calc(100% - 42px);
  width: 35px;
  height: 35px;
  z-index: 1;
}

.work-portfolio__item::after {
  content: 'БУРГЕР - ITALIAN   усього 90 грн';
  display: block;
  position: absolute;
  left: 60px;
  top: 180px;
  font-size: 15pt;
  bottom: 0px;
  width: 250px;
  height: 150px;
  background-color: #000000;
}
<div class="work-portfolio__items">
  <div class="work-portfolio__item"><img src="img/burger.jpg" height="300" width="250"> </div>

</div>

6
  • 1
    а зачем здесь псевдо элементы?
    – Paul Wall
    Commented 27 февр. 2018 в 19:29
  • условие задание такое
    – user275180
    Commented 27 февр. 2018 в 19:32
  • а в чем проблема у тебя итак в примере сдвинут блок куда тебе нужно. Больше конкретики, что именно не получается?
    – Paul Wall
    Commented 27 февр. 2018 в 19:33
  • content: 'БУРГЕР - ITALIAN как здесь зделать форматний вивод
    – user275180
    Commented 27 февр. 2018 в 19:40
  • и вставить здесь таблицу
    – user275180
    Commented 27 февр. 2018 в 19:40

2 ответа 2

1

Через псевдоэлементы можно сделать ромбик. Возможно были трудности именно с этим?

.line {
  position: relative;
  margin: 50px auto;
  width: 150px;
  height: 1px;
  background: #ccc;
}

.line:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ccc;
}
<div class="line"></div>

0

Не вижу ничего сложного. обычная верстка. нужно всего то флексами разбить или гридами.разбей 2 блокс контентом на 2 флекс контейнера и листай там

добавь подродительский блок еще один.используй для подблоков свойство flex.и значения 1 и т.д чтобы разделить их ширину,а там также по накатанной. в конце концов можно разбить на row все гридами

1
  • не рекомендую использовать Grid-ы так как они полностью не поддерживаются.
    – Randall
    Commented 28 февр. 2018 в 11:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.