Размещение изображения, текста и ссылки внутри элемента сетки CSS с помощью flex, часть 2 [дубликат] ⇐ CSS

[Anonymous]

Итак, я возвращаюсь к теме переполнения стека.
Я опубликовал это пару дней назад. Разместив изображение, текст и ссылку внутри элемента сетки CSS с помощью flex
Мне удалось реализовать изображение, которое я пытался добавить на свою страницу по этому вопросу. В настоящее время страница выглядит так.
введите здесь описание изображения
Я хочу добавить еще одно изображение — на этот раз в поле «Пройти сертификацию» на внизу, чтобы мой финал выглядел примерно так, хотя я хочу применить эффект радиуса границы, который вы видите на других полях в верхнем и нижнем левом углу этого изображения.
введите здесь описание изображения
Я пытался использовать решение, которое получил из предыдущего поста, но в итоге получил вот это.
введите здесь описание изображения
Я думаю, что проблема с изображением связана с заполнением, которое я установил для ссылки в этом div. Я также не знаю, как расположить текст в правой части элемента div.
Потрясающий шрифт, который вы видите на первых двух изображениях, появился потому, что я удалил это изображение из своего CMS, но они не отображаются, когда я открываю страницу локально.
Вот мой код. У меня странное сочетание встроенного и внешнего CSS — это также обусловлено ограничениями в CMS, где мне в конечном итоге приходится развертывать страницу, поэтому я ничего не могу с этим поделать.

.vtx_gc_001 {
display: grid;
height: 450px;
/*padding: 10px;*/
gap:30px;
background-color: #ffffff;

}
.vtx_gi {
border-radius: 50px;
display: flex;
width: 100%;
height: 100%;
/*justify-content: center;*/
/*align-items: center;*/
/*align-items: center;*/
/*justify-content: center;*/
/*padding: 20px;*/
/*font-size: 30px;*/
/*text-align: center;*/
}

#vtxgi1 {
grid-column: 1 / span 2;
background-color: #00943c;
}

#vtxgi2 {

grid-row: 2 / 4;
background-color: #008299;
/*border-radius: 0px;
border-bottom-right-radius: 50px;*/

}

#vtxgi3 {
grid-column: 2;
grid-row: 2;
background-color: #BEC1C3;
}

#vtxgi4{
grid-column: 2;
grid-row: 3;
background-color: #00609C;

}

#vtxgi5 {
grid-column: 1 /span 2;
grid-row: 4;
background-color: #F3CF40;

}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5

{
display: flex;
align-self: last baseline;

}

.vtx_grid_a {

width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-end;

}

.vtx_gi {
position: relative;
overflow: hidden;
}

.vtx_gi .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 70%;
}

.vtx.gi .image2 {
position: absolute;
top: 0;
left: 0;
width: 30%;
bottom: 0;
right: 0;
height: 100%;

}



Exchange 2024 
Instructor Led Training 
Course Catalog 
Partner Resources 
Get Certified! 




Подробнее здесь: https://stackoverflow.com/questions/790 ... g-flex-par