مرحبا
كنت احاول حل هذا التحدي لكن يبدو انه لدي خطأ ما ,
التحدّي
لم استطع رسم الحروف ,
حاولت بطريقتين والطريقة الثانية موضوعة بداخل تعليق,
ما هو خطأي وهل من نصيحة للبدء بالحركة الخاصة بالمربع الأصفر
<body>
<div class="container">
<div class="character-e"></div>
<!-- الطريقة الثانية هي وضع حاويات تحتوي على نفس لون خلفية العنصر الأب واعطائها مكان خاص من تقسيمة ال grid -->
<!-- <div class="whait-e-1"></div> -->
<!-- <div class="whait-e-2"></div> -->
<div class="character-l"></div>
<!-- <div class="whait-l-1"></div> -->
</div>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 400px;
height: 400px;
margin: 50px auto;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas: "E E E E L . . ."
"E . . . L . . ."
"E . . . L . . ."
"E E E E L . . ."
"E . . . L . . ."
"E . . . L . . ."
"E E E E L L L L";
gap: 15px;
background-color: #eee;
}
.character-e {
display: grid;
grid-area: "E";
background-color: rgb(57, 44, 44);
}
.character-l {
display: grid;
grid-area: "L";
background-color: rgb(57, 44, 44);
}
/* التنسيقات الخاصة بالحل الثاني */
/* .whait-e-1{
grid-area: 2, 2, 4, 5;
background-color: #eee;
}
.whait-e-2{
grid-area: 5, 2, 7, 5;
background-color: #eee;
} */
/* .white-l-1 {
grid-area: 1, 6, 7, 9;
background-color: #eee;
} */
/* الحل الخاص بااالذكاء الاصطناعي */
/* .container {
width: 400px;
height: 400px;
margin: 50px auto;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"E E E E L..."
"E... L..."
"E... L..."
"E E E E L..."
"E... L..."
"E... L..."
"E E E E L L L L";
gap: 15px;
background-color: #eee;
}
.character-e {
display: grid;
grid-area: "E";
background-color: rgb(57, 44, 44);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-template-areas:
"E E E E"
"E E E E"
"E E E E"
"E E E E"
"E E E E";
}
.character-l {
display: grid;
grid-area: "L";
background-color: rgb(57, 44, 44);
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-template-areas:
"L";
}