0

Full MockupI am currently having issues laying out my pictures like the example photo is shown. No matter what I do, my pictures always either grow too big or won't stay in the same place as I need them to be. I wrote and erased so much code at this point that I decided to ask for help!

Note: My CSS code background-image: url() was given to me by the company, so I do apologize for the weird name for the image. If you need anything else from me, please let me know!

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

/* Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;;
}

/* Banner Section */
.banner {
    width: 100vw;
    min-height: 55vh;
    background: url(./images/HERO\ 1.jpg) no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: bottom;
  }
  
  .content {
    width: 90%;
    text-align: center;
  }
  
  .content .title {
    color: #de041c;
    font-size: 65px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: -20px;
  }
  
  .content .subTitle {
    color: #fff;
    font-size: 42px;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .content .sentence {
    color: #fff;
    font-size: 16px;
    margin: 30px 0 0 0;
  }

  .section-2 {
    border-top: 50px solid #de041c;
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assessment</title>
    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="banner">
        <div class="content">
            <div class="title">Lorem Ipsum</div>
            <div class="subTitle">Dolar sit amet aran</div>
            <div class="sentence">Rerum quas delectus non ab eveniet nihil, eaque tempora incidunt blanditiis, molestias
                sit,
                unde id? Tempora eius illo labore officiis quis quae.</div>
        </div>
    </div>
    <!-- Section 2 -->
<div class="section-2">
    <section>
        <div>
            <img src="./images/COLLAGE_IMAGE_1.jpg" alt="Image #1">
        </div>
        <div>
            <img src="./images/COLLAGE_IMAGE_5.jpg" alt="Image #2">
            <img src="./images/COLLAGE_IMAGE_4.jpg" alt="Image #3">
        </div>
    </section>
</div>
</body>

</html>

MockupImage

  • I can't see anything in the code you have given that relates to laying out those images and the video. Please show us what you have tried. – A Haworth Jul 03 '22 at 07:17
  • I'm sorry! I updated the code on the first 3 images before the video in the middle of the page. I'm not sure how to approach that. –  Jul 03 '22 at 07:50
  • I still can't see how you are trying to lay things out. It's a slightly weird layout but I think you could at least approximate it with a fairly simple CSS grid. Have a go and it still stuck then put the CSS you have tried into your question and describe what isn't working. – A Haworth Jul 03 '22 at 07:53
  • So in the current picture that I have up, I have the first 3 images starting from the left. What I don't have is the video and the two images below it. Since the video is floating above the top portion of the page and the second portion of the page, that's where I'm having trouble. –  Jul 03 '22 at 08:18
  • That is where grid might help. – A Haworth Jul 03 '22 at 08:20
  • Would you have an idea on how to add a video as shown in the image that will float between two different sections? –  Jul 03 '22 at 09:05
  • You asked this question before and I told you back then, that CSS-Grid is not the same as Flexbox. You using Flexbox which is a totally different approach and mechanic. However same as last time, you look into something that is called `masonry layout`. – tacoshy Jul 03 '22 at 09:53
  • From the information available to us, the video does not 'float' between other elements but is an integral part of the the grid. – A Haworth Jul 03 '22 at 13:39
  • @AHaworth Okay, thanks for letting me know! Do you if there was a way to share the photos I'm currently using? I have a separate folder in my code where my images are stored. I know from my code now, you can't see those images appear. –  Jul 03 '22 at 23:37
  • @AHaworth I have also added the entire image I'm doing a mockup on. –  Jul 03 '22 at 23:44
  • That new image makes a difference to possible approaches. Has the answer pointed to by the closed notice solved your problem? I ask because the video dimensions affect the placement of images which is not so in the normal, non overlapping masonary situation. – A Haworth Jul 04 '22 at 06:34
  • Okay great! It has in someway, but this is the first time I am hearing of the masonry layout. I think the also part of it as well would be making sure it could be scalable if the website was being reduced in size or increased in size. –  Jul 04 '22 at 08:18

0 Answers0