Как бы лучше сверстать блок. Через css-Grid или с помощью сеток bootstrap?
1 ответ
Хотя слышал, что есть другой способ
Конечно есть, вас не обманули. Этот способ называется: "суметь сверстать своими ручкамиⒸ". И он, кстати, самый лучший. И легко запоминается: СССР.
Вот держите полностью готовое решение:
* {
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>