Фон из трех изображений и маленькая синяя строчка внизу. HTML

Question

Подскажите пожалуйста, как сделать вот такой фон из трех изображений и ниже изображений сделать синею линию с надписями по центру.
https://i.stack.imgur.com/uWj0h.png

Answer 1

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  font-size: 20px;
  grid-template-areas:
  'i t e'
  'footer footer footer'
  ;
}
.items:nth-child(1){
  grid-area: i;
  background-color: red;
}
.items:nth-child(2){
   grid-area: t;
  background-color: blue;
}
.items:nth-child(3){
  grid-area: e;
  background-color: green;
}
.footer{
   grid-area: footer;
  background-color: gray;
}

<div class="grid">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="footer">footer</div>
</div>

Answer 2

Пример:

div {
  width: 600px; height: 50px;
  background-color: royalblue;
}

div>img {
  float: left; display: inline-block;
  width: 200px; height: 120px;
}

div>div {padding-top: 130px;}

div>div>p {color: white; text-align: center; line-height: 30px;}

<div>
  <img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  <img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  <img src="https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  <div>
    <p>Семья</p>
  </div>
</div>

Answer 3

body{
  margin: 0;
  padding: 0;
}

.items{
  width: 33.3%;
  max-width: 33.3%;
  display: inline-block;
  text-align: center;
  font-size: 20px;
}
.items:nth-child(1){
  background-color: green;
}
.items:nth-child(2){
  background-color: blue;
}
.items:nth-child(3){
  background-color: yellow;
}
.footer{
  text-align: center;
  font-size: 20px;
   width: 100%;
  max-width: 100%;
  background-color: gray;
}

<div class="items">1</div><div class="items">2</div><div class="items">3</div>
<div class="footer">footer</div>

Answer 4

<body>
    <div class="wrapper">
        <div class="row-img">
            <img src="" alt="" class="img">
            <img src="" alt="" class="img">
            <img src="" alt="" class="img">
        </div>
        <div class="row-text">
            <p class="text">
                Lorem ipsum dolor.
            </p>
        </div>
    </div>
</body>

.wrapper {
    display: flex;
    flex-direction: column;
}
.row-img {
    display: flex;
    flex-direction: row;
}
.row-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

БЛОГ НА HUSL

Фон из трех изображений и маленькая синяя строчка внизу. HTML

Ответы (4 шт):