Issue
How do I create the horizontal collage and with the same space in between pictures (shown in the picture below) using html5 and css3?
I am very new into both StackOverflow, HTML5 and CSS3 so I do apologize if this post is a bit messy. And I hope you can help my anyway.
This is how i want the final design to look.
Here is my code 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>`Solution
You probably want to have a look at display: flex link
Here is an example.
/* the flex container */
.collage_index_group {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
/* the flex items */
.collage_index {
width: 50px;
height: 30px;
background-color: #f1f1f1;
margin: 10px;
padding: auto;
font-size: 30px;
}<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<div class="collage_index_group">
<div class="collage_index">
<img src="img/optimized images/adorable-20374_1920_250x250.png">
</div>
<div class="collage_index">
<img src="img/optimized images/bride-1867228_1920._250x250png.png">
</div>
<div class="collage_index">
<img src="img/optimized images/smile-2072908_1920_250x250.png">
</div>
</div>Thanks for sharing the code, please do not forget to share the css. If you could make a snipplet with it it would be perfect ;)
I will now try to adjust my snipplet accordingly.
Edit
I mistakenly wrote something about h1-h6, but found out I was wrong after double checking.
Answered By - The Blind Hawk Answer Checked By - Katrina (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.