Создайте заголовок с сеткой 4x4 ⇐ Html

[Anonymous]

Я изучаю Intro CSS и HTML, я хочу создать титульную страницу с именем справа и изображениями слева в сетке 4x4, я также хочу, чтобы она была отзывчивой на изменения размера экрана < /p>
html < /p>

Код: Выделить всё

   






Mawusi Amos



Mawusi Amos




[img] [/img]



[img] [/img]



[img] [/img]



[img] [/img]





< /code>
css < /p>
/* overall styling of html */
html{
background-color: bisque;

}

/* name should be centered left */
p{
font-size: 96px;
font-family: serif;
margin: 0;
position: absolute;
top: 55%;
left: 30%;
transform: translate(-50%, -50%);

}
p, .overall-profile{
min-width: auto;
min-height: auto;
max-width: fit-content;
max-height: fit-content;
}

.overall-profile{
position: absolute;
right: 10%;
top: 35%;
display: grid;
grid-template: repeat(2, 50%)/ repeat(2,50%);
justify-content: right;
align-content: space-around;
margin: auto;

}

#strength{
grid-column-start: 1;
grid-column-end: 1;

}

#strength img, #coding img, #personal img, #Instructor img{
height: 350px;
width: 350px;
border-radius: 20px;
border-style: groove;
box-shadow: 50px;
box-sizing: content-box;
}

#coding img{
grid-column-start: 2;
grid-column-start: 2;
}

Я хочу, чтобы имя было центрировано слева, и у меня будет четыре изображения в формате сетки (2 столбца, 2 ряда).

Подробнее здесь: https://stackoverflow.com/questions/796 ... a-4x4-grid