How do I insert 3 separate rounded images above 3 separate columns? - html

Question

body {
background: #911f3c
}
.content-title {
font-family: teko;
color: white;
text-align: center;
font-size: 40px;
padding-top: 80px;
padding-bottom: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.container {
font-family: teko;
color: white;
font-size: 30px;
line-height: 35px;
padding-bottom: 50px;
padding-left: 20px;
padding-right: 20px;
}
.column-left {
float: right;
padding-left: 30px;
width: 30%;
}
.column-right {
float: right;
width: 33%;
}
.column-center {
display: inline-block;
width: 33%;
}
<h3 class="content-title">
Explore - Discover - Enjoy
</h3>
<div class="container">
<div class="column-center">Explore the limitless archive of the worlds highest quality cinematic sports videos </div>
<div class="column-left">Enjoy the vast selection of videos and learn the stories behind the creation of the art</div>
<div class="column-right">Discover your favourite film makers, content creators and athletes within the industry</div>
</div>
I am creating a quick project for uni and i am struggling on this one little aspect. I really want to add 3 separate, relatively small, rounded images below the 3 word title but above each column (see the attached image). But every time I do it all the text moves around and it just being a massive pain.
How can I get this working?

Answer 1

Assuming you're not using any framework like bootstrap, this should do the trick:
body {
background: #911f3c
}
.content-title {
font-family: teko;
color: white;
text-align: center;
font-size: 40px;
padding-top: 80px;
padding-bottom: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.col-container {
margin-left: 20px;
margin-right: 20px;
}
.col {
float: left;
width: 33.3333%;
}
.col-content {
margin-bottom: 30px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.col-content img {
display: inline-block;
vertical-align: middle;
}
.col-content p {
font-family: teko;
color: white;
font-size: 30px;
line-height: 35px;
text-align: justify;
}
<h3 class="content-title">
Explore - Discover - Enjoy
</h3>
<div class="col-container">
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Explore the limitless archive of the worlds highest quality cinematic sports videos
</p>
</div>
</div>
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Discover your favourite film makers, content creators and athletes within the industry
</p>
</div>
</div>
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Enjoy the vast selection of videos and learn the stories behind the creation of the art
</p>
</div>
</div>
</div>
I hope this helps :)