Как лучше всего сверстать [закрыт]

134

10 мая 2019, 14:20

Долго думаю, как правильней всего подойти к этому вопросу. Хотя вроде ничего сложного и, разумеется, у меня есть идеи. Однако я уверен, что подобное - стандартная проблема в верстке. И для ее решения придумано какое-то гениальное и просто решение.

Answer 1

Я предлагаю такой вариант, где левый и правый блок в планшетной версии встанут друг над другом и где фон уже будет не от родителя т.е не inherit а скажем в rgba в действительности надо будет скопировать код и сохранить их в файлы со своим расширением и проверить - я тестил на 768px, к сожалению фон из тырнета не отображается:

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.element { 
  width: 100%; 
  height: 50vh; 
  background: yellow; 
  display: flex; 
  align-items: center; 
  background: #131515; 
  background-size: cover; 
  color: #fbfbfb; 
  font-size: 14px; 
} 
 
.elem { 
  width: 50%; 
  height: 100%; 
} 
 
.elem1 { 
  background: inherit; 
  padding: 20px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
} 
 
.elem1 h2 { 
  margin: 10px 0; 
  text-transform: uppercase; 
} 
 
.elem1 p { 
  padding: 6px 0; 
} 
 
.elem1 a { 
  color: #fbfbfb; 
  text-decoration: none; 
} 
 
.elem2 { 
  background-color: green; 
  background-image: url(https://get.pxhere.com/photo/desk-computer-writing-screen-apple-keyboard-technology-mouse-workspace-office-brand-design-document-916386.jpg); 
  background-size: cover; 
} 
 
p.size { 
  font-size: 2em; 
  color: red; 
  position: fixed; 
  bottom: 20px; 
  left: 20px; 
} 
 
@media (max-width:812px) { 
  .element, 
  .elem1 { 
    position: relative; 
    width: 90%; 
    margin: auto; 
    height: auto; 
  } 
  .elem1 { 
    z-index: 10; 
    background: rgba(0, 0, 0, 0.7); 
    width: 100%; 
  } 
  .elem2 { 
    position: absolute; 
    width: 100%; 
  } 
}

<meta name="viewport" content="width=device-width"> 
 
<div class="element"> 
  <div class="elem elem1"> 
    <p> 
      <span>jun, 2010</span> 
      <span>|</span> 
      <span>in <a href="#">Culture</a></span> 
    </p> 
    <h2> 
      Lorem ipsum dolor. 
    </h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione placeat fuga quod quae unde, itaque soluta, dolorum modi. Voluptas, saepe.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptatem. </p> 
  </div> 
  <div class="elem elem2"></div> 
</div>