How to add text under image in html css-CodePudding

Hello i have this website that must look like this:

this is an image of what i have done so far:

and this is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Horseradish</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-uWxY/CJNBR 1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF"
      crossorigin="anonymous"
    />
    <style>
      body {
        overflow-x: hidden;
      }
      .design {
        width: 771px;
        height: 568px;
        margin-left: 364px;
        margin-right: 365px;
        margin-top: 247px;
        margin-bottom: 200px;
      }

      .image1 {
        width: 138px;
        height: 92px;
        margin-top: 33px;
        margin-left: 24px;
        margin-right: 116px;
      }

      .image2 {
        width: 99px;
        height: 98px;
        margin-top: 35px;
        margin-left: 24px;
        margin-right: 81px;
      }

      .image3 {
        width: 79px;
        height: 90px;
        margin-top: 39px;
        margin-left: 25.7px;
        margin-right: 60px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="row">
        <div class="col-6"></div>
        <div class="col">
          <div class="text-end">
            <img src="images/location.png" alt="" class="image1" />
            <img src="images/how.png" alt="" class="image2" />
            <img src="images/why.png" alt="" class="image3" />
          </div>
        </div>
      </div>

    </header>
    <img src="images/home.png" alt="" class="design" />
  </body>
</html>

I have put the images in the correct way but i am stuck adding the text below the image. I have also added bootstrap. Any suggestions how to do it would be helpful.

Thank you in advance.

CodePudding user response：

As a simple approach, you can make use of figure and figcaption, and then apply your styles to figcaption.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_figcaption

In case you want to move your text a little bit up like one in the image with the horse, you can use the position property.

CodePudding user response：

Hello i edited for you the code is working for me hope it works on you.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Horseradish</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-uWxY/CJNBR 1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF"
      crossorigin="anonymous"
    />
    <style>
      body {
        overflow-x: hidden;
      }
      .design {
        width: 771px;
        height: 568px;
        margin-left: 364px;
        margin-right: 365px;
        margin-top: 247px;
        margin-bottom: 200px;
      }

      .image1 {
        width: 138px;
        height: 92px;
        margin-top: 33px;
        margin-left: 24px;
        margin-right: 116px;
      }

      .image2 {
        width: 99px;
        height: 98px;
        margin-top: 35px;
        margin-left: 24px;
        margin-right: 81px;
      }

      .image3 {
        width: 79px;
        height: 90px;
        margin-top: 39px;
        margin-left: 25.7px;
        margin-right: 60px;
      }

      figcaption {
        font-size: 20px;
        font-weight: 800;
      }
    </style>
  </head>
  <body>
    <div class="text-center">
      <div class="row">
        <div class="col-6"></div>
        <div class="col">
          <figure>
            <img src="images/location.png" alt="" class="image1" />
            <figcaption style="padding-right: 60px">
              Hours & Location
            </figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="images/how.png" alt="" class="image2" />
            <figcaption style="padding-right: 30px">How it works</figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="images/why.png" alt="" class="image3" />
            <figcaption>Why</figcaption>
          </figure>
        </div>
      </div>
    </div>

    <img src="images/home.png" alt="" class="design" />
  </body>
</html>

CodePudding user response：

Tweaked your code a bit, you can try something like this using bootstrap :

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .design {
        width: 771px;
        height: 568px;
      }
    </style>
  </head>
  <body>
    <div class="d-block text-center">
    <img src="https://picsum.photos/200/300?random=4" class="design" alt=""  />
    <p class="text-center">Hello</p>
    </div>
  </body>
</html>

CodePudding user response：

Try learning about flexbox. Is it much easier to understand and to play with too. Hope this is what you asked for. Here's the snippet code:

.container{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  padding:15px;
flex-wrap:wrap;
}
img{
  width:100px;
  height:100px;
}
.cnt1, .cnt2, .cnt3{
  margin:15px;
  padding:0;
  display:flex;
  flex-direction:column; 
  text-align:center;
}

<div class="container">

<div class="cnt1">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

<div class="cnt2">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

<div class="cnt3">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

</div>