Question

Create a 2x2 MDN grid containing at least 4 top company employees (ex. CEO,
President, VP, CFO, COO, Founder, Co-founder, etc…) with headshot image, rank, first
name, last name, age, & email information. Use alternating background colors of
orange (with black text) and black (with white text).

Answer 1

HTML:
<div class="container">
<div>
<img src="url1">
CEO<br>
Mr. John Bayer<br>
34 Years<br>
[email protected]
</div>
<div> <img src="url2">
President<br>
Mr. Simon Greeg<br>
32 Years<br>
[email protected]
</div>
<div> <img src="url3">
Vice President<br>
Mr. Josh Hugh<br>
38 Years<br>
[email protected]
</div>
<div> <img src="url4">
CFO<br>
Mr. Ventan Lee<br>
29 Years<br>
[email protected]
</div>
</div>

CSS:

body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
  
.container > div {
border-radius: 5px;
padding: 10px;
background-color: rgb(207,232,220);
border: 2px solid rgb(79,185,227);
text-align: center;
} .container {
display: grid;
grid-template-columns: 49% 49%;
grid-gap: 2%;
grid-auto-rows: 350px;
}
.container > div > img{
max-width: 256px;
}
.container > div:nth-child(even) {
background: orange;
color: black;
}
.container > div:nth-child(odd) {
background: black;
color: white;
}

OUTPUT:

NOTE: I have not added any url due to copyright issues. You can add your own image url for img tags.