I'm creating an html/css layout which needs to look like this:
(https://i.sstatic.net/Z49ekM8m.png)
Each box is a link. To extend the active link area over the entire box, and to get the text positioning at the bottom of each grid item, I set each link to be a flexbox. So I currently have a grid layout with a flex box within each grid item if that makes sense.
So far, I've been able to accomplish this:
(https://i.sstatic.net/itbwRXvj.png)
However, when I try to get an image into the "Instructor Led Training" box, I run into all sorts of problems. How can I add my image without disrupting the rest of my design?
I've tried putting the image into the div for the flex box, and it just blows the whole thing up.
This is the "working" code, before I tried to add my image:
.vtx_gc_001 { display: grid; height: 450px; /*padding: 10px;*/ gap: 30px; background-color: #f1f1f1;}.vtx_gi { border-radius: 50px; display: flex; width: 100%; height: 100%;}#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;}<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;"><div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div><div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px;">Instructor Led Training</a></div><div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div><div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div><div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div></div>