1

Как бы лучше сверстать блок. Через css-Grid или с помощью сеток bootstrap?

Хотя слышал, что есть другой способ введите сюда описание изображения

1
  • 1
    как удобно, так и верстайте - выбор инструментов за Вами 12 фев 2021 в 11:50

1 ответ 1

3

Хотя слышал, что есть другой способ

Конечно есть, вас не обманули. Этот способ называется: "суметь сверстать своими ручкамиⒸ". И он, кстати, самый лучший. И легко запоминается: СССР.

Вот держите полностью готовое решение:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: repeating-linear-gradient(to right, #eeeff1, #eeeff1 60px, #efe8e9 60px, #efe8e9 120px);
}


/*Разметка*/

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.image,
.text {
  margin: 20px;
  flex: 1 1 auto;
  align-self: center;
}


/*Монитор*/

.monitor {
  position: relative;
  width: 200px;
  height: 140px;
  background: #0e4d8b;
  border: 8px solid #08cedd;
  border-radius: 8px;
  background: url(https://i.stack.imgur.com/EymT3.png);
  background-position: -140px 240px;
}

.monitor:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -8px;
  left: -16px;
  height: 16px;
  width: 216px;
  border-radius: 0 0 16px 16px;
  background: #08cedd;
  background: linear-gradient(to bottom, #08cedd, #08cedd 8px, #08b5cc 8px, #08b5cc 8px);
}


/*Текст и кнопка*/

h1,
p {
  font-family: monospace;
}

h1 {
  font-size: 20px;
  color: black;
}

p {
  font-size: 14px;
  color: gray;
  margin: 20px 0;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  background: #3a5176;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: all 0.5s;
}

button:hover {
  background: linear-gradient(to bottom, #08cedd, #08cedd 50%, #08b5cc 50%, #08b5cc 50%);
}
<div class="container">
  <div class="image">
    <div class="monitor"></div>
  </div>
  <div class="text">
    <h2>Учиться никогда не поздно!</h2>
    <p>Ученье - свет, а неученье - тьма! Сегодня с легкостью можно обучиться чему угодно: было бы желание!</p><button>Хочу учиться</button></div>
</div>

1
  • я польщён!)))))
    – Alekosh
    13 фев 2021 в 18:06

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.