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

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

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

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

4 лайка
2

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

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

3

.raccoon-card{
width:530px;
height:307px;
display:grid;

grid-template-columns:100px 200px 100px;
grid-template-areas:“avatar name name”“avatar email phone”“skills skills qr”;
}
.name{
margin-top:30px;
margin-left:40px;
width:320px;
grid-area:name;
}
.avatar{
margin-top:20px;
margin-left:20px;
grid-area:avatar;
width:100px;
height:100px;
}
.phone{
width:150px;
grid-area:phone;
margin-left:60px;
}
.email{
margin-left:40px;
margin-bottom:10px;
width:200px;
grid-area:email;
}
.skills{
margin-left:20px;
width:320px;
grid-area:skills;
margin-bottom:10px;
}
.qr{
margin-left:110px;
margin-top:47px;

width:100px;
height:100px;

}
100%

4

14/11/2022. Достаточно просто, сомневался прописывать grid-template-columns.

.raccoon-card {
  width: 490px;
 display: grid;
 grid-template-areas: "avatar name name"
                      "avatar email phone"
                      "skills skills qr";
 grid-template-columns: 100px 200px 150px;                     
 gap: 20px;
 padding: 20px;
}
.avatar {
 grid-area: avatar; 
 }
.qr {
 grid-area: qr; 
 align-self: end;
 justify-self: end;
}
.skills {
 grid-area: skills; 
 }
.name {
 grid-area: name; 
 align-self: end;
}
.phone {
 grid-area: phone; 
}
.email {
 grid-area: email; 
}
2 лайка
5 
.raccoon-card {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  gap: 20px;
  grid-template-areas: "avatar name name"
                       "avatar email phone"
                       "skills skills qr";
  width: 490px;
  padding: 20px;
}

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

.avatar {
 grid-area: avatar;
}

.phone {
  grid-area: phone;
  
}

.email {
  grid-area: email;
  
}

.skills {
  grid-area: skills;
}

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