How to put images and text inside boxes (html/css)? - html

Question

Currently I have this (except only 3 boxes next to each other)
However, I am trying to put a small header, an image, and a small description within each box. How can I go about doing this?
Example image
Below the code snippet:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

Answer 1

You can just add them as elements in your div:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
.block img {
width: 100px;
height: 100px;
}
<div class="container">
<div class="block">
<h3>Title 1</h3>
<img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://i.imgur.com/8G3NXcW.gif">
<p>Some text</p>
</div>
</div>

Answer 2

You can just put them inside the "block" divs as elements. For example like this:
<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>

Answer 3

HTML PART
<div class="container">
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
</div>
CSS PART
.header {
width:100%;
float:left;
}
.image img {
width:100%;
float:left;
}
.description{
width:100%;
float:left;
}