Is there a way to achieve a horizontal collage with equal spacing between pictures using HTML5 and CSS3?
As a newcomer to HTML5, CSS3, and StackOverflow, I apologize if my post is a bit messy. Any help would be greatly appreciated.
This is the desired design:
Here is the code I have so far:
h1 {
font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
font-size: 2rem;
font-weight: bold;
color: #a71b1a;
}
h2 {
font-family: 'Brother 1816 Bold Italic', Arial, Helvetica, sans-serif;;
font-size: 1.5rem;
font-weight: bold;
color: #000;
}
.collage_index_1 {
align-content: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/tck7grc.css">
<title>Freya Photos - Index</title>
</head>
<body>
<main>
<header>
<!-- all the code related to the header here -->
</header>
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<!-- I cannot align these three images here: -->
<div class="collage_index_group">
<div class="collage_index_1">
<img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel.">
</div>
<div class="collage_index_2">
<img src="img/optimized images/bride-1867228_1920._250x250png.png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately">
</div>
<div class="collage_index_3">
<img src="img/optimized images/smile-2072908_1920_250x250.png" alt="A portrait of a young woman holding an apple in her right hand, close to the face while looking straight into the camera, with a little smile">
</div>
</div>
<footer>
<!-- all the code related to the footer here -->
</footer>
</main>
</body>
</html>