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

[Anonymous]

Я изучаю Intro CSS и HTML, я хочу создать титульную страницу с именем справа и изображениями слева в сетке 4x4, я также хочу, чтобы она была отзывчивой к изменениям размера экрана < /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;
}< /code>








Mawusi Amos




Mawusi Amos




[img] [/img]



[img] [/img]



[img] [/img]



[img] [/img]

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

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