<article class="companions__item">
<img src="https://via.placeholder.com/70x70" alt="" width="70" height="70" title="">
<h3 class="companions__name">Петя Демин</h3>
<div class="companions__hashtags hashtags">
<a class="hashtags__link" href="#">#бургер</a>
<a class="hashtags__link" href="#">#бар</a>
<a class="hashtags__link" href="#">#футбол</a>
<a class="hashtags__link" href="#">#концерт</a>
<a class="hashtags__link" href="#">#крафт</a>
</div>
<ul class="country__list">
<li class="country__item country__item--sri-lanka">Шри-Ланка</li>
<li class="country__item country__item--thailand">Таиланд</li>
<li class="country__item country__item--seychelles">Сейшелы</li>
</ul>
<div class="companions__info info">
<ul class="info-transport__list">
<li class="info-transport__item info-transport__item--plane">
<img src="https://via.placeholder.com/33x33" alt="" width="33" height="33" title="">
</li>
<li class="info-transport__item info-transport__item--bus">
<img src="https://via.placeholder.com/33x33" alt="" width="33" height="33" title="">
</li>
<li class="info-transport__item info-transport__item--bicycle">
<img src="https://via.placeholder.com/33x33" alt="" width="33" height="33" title="">
</li>
<li class="info-transport__item info-transport__item--person">
<img src="https://via.placeholder.com/33x33" alt="" width="33" height="33" title="">
</li>
<li class="info-transport__item info-transport__item--person">
<img src="https://via.placeholder.com/33x33" alt="" width="33" height="33" title="">
</li>
</ul>
<div class="info-level">80</div>
</div>
<div class="companions__btns btns">
<button class="btns__to-call btn" type="button">Позвать!</button>
<button class="btns__like btn" type="button">1500</button>
</div>
</article>
body {
background: white;
color: #323232;
font-weight: 300;
height: 100vh;
margin: 0;
font-family: Helvetica neue, roboto;
}
h1 {
font-weight: 200;
font-style: 26px;
margin: 10px;
}
* {
box-sizing: border-box;
}
.companions__item {
position: relative;
display: grid;
grid-template-columns: repeat(23, 10px);
grid-template-rows: repeat(39, 10px);
/* grid-row-gap: 16px; */
width: 270px;
margin: 30px auto;
padding: 15px 20px 20px;
outline: 1px solid red;
}
.companions__item img {
grid-column: span 7;
grid-row: span 7;
}
.companions__name {
grid-column: 9 / -6;
grid-row: span 7;
margin: 0;
}
.companions__hashtags {
grid-column: 1 / -7;
grid-row: 9 / 15;
}
.country__list {
display: grid;
align-items: center;
/* display: flex;
flex-direction: column;
justify-content: center; */
position: relative;
grid-column: 1 / -1;
grid-row: 16 / 24;
margin: 0;
padding: 0;
list-style: none;
}
.country__list::before {
content: "";
position: absolute;
top: -15px;
left: -20px;
width: calc(100% + 40px);
height: 1px;
background-color: #edeff6;
}
.country__list::after {
content: "хочет посетить:";
position: absolute;
top: -15px;
padding: 0 10px;
background-color: #fff;
transform: translateY(-50%);
}
.companions__info {
position: relative;
display: flex;
justify-content: space-between;
grid-column: 1 / -1;
grid-row: 26 / 32;
margin-top: 20px;
}
.companions__info::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: 1px;
background-color: #edeff6;
}
.info-transport__list {
position: relative;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.info-transport__list::before {
content: "транспорт:";
position: absolute;
top: -20px;
padding: 0 10px;
background-color: #fff;
transform: translateY(-50%);
}
.info-level {
position: relative;
width: 45px;
text-align: center;
}
.info-level::before {
content: "левел:";
position: absolute;
top: -20px;
left: 50%;
padding: 0 10px;
background-color: #fff;
transform: translate(-50%, -50%);
}
.companions__btns {
grid-column: 1 / -1;
grid-row: -5 / -1;
}
.btn {
background-color: transparent;
border: none;
}
.btns__to-call {
width: 100%;
padding: 15px 0;
color: #161c35;
background-color: #ffd74b;
text-transform: uppercase;
font-weight: 700;
border-radius: 20px;
cursor: pointer;
}
.btns__like {
position: absolute;
top: 65px;
left: 65px;
padding-left: 40px;
}
.btns__like::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 31px;
height: 31px;
background-color: rgb(0, 111, 202);
border-radius: 50%;
transform: translateY(-50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.