How do i create a horizontal collage using only HTML5 and CSS3?-CodePudding

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 >
      <div >
        <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 >
        <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 >
        <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>`

CodePudding user response：

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 >
  <div >
    <img src="img/optimized images/adorable-20374_1920_250x250.png">
  </div>
 
  <div >
    <img src="img/optimized images/bride-1867228_1920._250x250png.png">
  </div>

  <div >
    <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.

CodePudding user response：

Im not sure that what you mean

/* HORIZONTAL SCROLL */
.scroll-container{
  overflow: auto;
  white-space: nowrap;
  padding: 5px 70px 5px 20px;
  background: transparent;
  height: 100%;
  border-radius:15px;
}

.scroll{
  display:inline-block;
}

.scroll img {
  margin-right:22px;
  width:250px;
  height:100px;
  width:33%;
}

<div style="text-align:center; font-style:italic;">Scroll to left</div>
<div >
  <div >
    <!-- PLACE YOUR IMG URL HERE -->
      <img src="https://media.istockphoto.com/photos/programmer-working-with-program-code-picture-id1075599562?k=20&m=1075599562&s=612x612&w=0&h=cDFY2kKyhFzSNNlDQsaxoekIW0v7iyaMBkxp11Fz33U="/>
      <img src="https://www.careergirls.org/wp-content/uploads/2015/06/Computer_Programmer1920X10180.jpg"/>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
  </div>
</div>