вывести каталог либо плиткой, либо списком
Не могу научиться пользоваться методологией, не могу просто взять глядя на макет и разбить его на блоки и элементы
.item::before {
content: url(./../assets/img/icons/edit_no_active.png);
}@font-face {
font-family: "OpenSans";
src: url("fonts/opensans.woff2") format("woff2"),
url("fonts/opensans.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/opensansbold.woff2") format("woff2"),
url("fonts/opensansbold.woff") format("woff");
font-weight: 700;
font-style: normal;
}div {
font-family: OpenSans, Arial, sans-serif;
font-weight: bold;
}
position:absolute;
left: calc(50% - XX);
<div class="block">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>* {
box-sizing: border-box
}
html,
body {
background: #eee;
}
.block {
display: flex;
width: 80%;
margin: auto;
background: #fff;
}
.item {
width: 25%;
height: 200px;
border: 1px solid deepskyblue;
}
.item:hover {
flex-basis: 30%;
}
@media (max-width: 600px) {
.block {
flex-wrap: wrap;
}
.item {
flex-grow: 1;
width: 40%;
}
.item:hover {
width: 60%;
}
}
@media (max-width: 400px) {
.item {
width: 100%;
}
.item:hover {
width: initial;
}
}