Неопознанный енот 100% код

Курсы Микросетки. Продолжение
1

.raccoon-card{display:grid;
grid-template-columns:100px 200px 150px;
width:490px;
gap:20px;
padding:20px;
grid-template-areas:“avatar name name”
“avatar email phone”
“skills-list skills-list qr”;}

.avatar{grid-area:avatar;
width:100px;}
.name{grid-area:name;
width:320px;
align-self:end;}
.email{grid-area:email;
width:200px;}
.phone{grid-area:phone;
width:150px;}
.skills-list{grid-area:skills-list;
width:320px;}
.qr{grid-area:qr;
width:100px;
justify-self:end;
align-self:end;}

2

У меня получилось более лаконично.

.raccoon-card {
width:490px;
padding:20px;
display:grid;
grid-template-columns:100px 200px 150px;
gap: 20px;
grid-template-areas: “avatar name name”
“avatar email phone”
“skills skills qr”;
}

.avatar {
grid-area: avatar;
max-width: 100%;
height: auto;
}

.name {
grid-area: name;
align-self:end;
}

.email {
grid-area: email;
}

.phone {
grid-area: phone;
}

.skills {
grid-area: skills;
}

.qr {
grid-area: qr;
align-self: end;
justify-self: end;
max-width: 100%;
height: auto;
}

1 лайк