Испытание: визитка Неопознанного Енота

Курсы Микросетки. Продолжение
1 
.raccoon-card {
 padding: 20px;
 width: 490px;
 display: grid;  
 grid-template-columns: 100px 200px 150px;
 grid-template-areas: "avatar name name"
                      "avatar email tel"
                      "skills skills qr";
 gap: 20px; 
}

.avatar {
 grid-area: avatar;  
}

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

.email {
 grid-area: email;  
}

.tel {
 grid-area: tel;  
}

.skills {
 grid-area: skills;  
}

.qr {
 grid-area: qr;
 align-self: end;
 justify-self: end;
}
2

Мой вариант - 100%
.raccoon-card{
width:490px;
padding:20px;
display:grid;
grid-template-columns:100px 200px 150px;
grid-template-areas:“avatar name name”
“avatar email phone”
“skills skills qr”;
gap:20px;
}

.avatar{
grid-area:avatar;
}

.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;
}

3

Мое решение на 100%

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

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

.avatar{
grid-area: avatar;
}

.phone{
align-self: start;
grid-area: phone;
}

.email{
grid-area: email;
}

.skills{
grid-area: skills;
}

.qr{
align-self: end;
justify-self: end;
grid-area: qr;
}

4

thanks my issue has been fixed.

5

thanks my issue has been fixed.