-2

I want to design a website having a design where the image is overlapping the other image and text is side by the image with different positions . I am not able to code the design using positions or grid or flexbox . Need a code to do the design this is the design i want to make the image is given above.

I have try to use the position absolute , flexbox , grid layout but not able to get the desired results. If any one can help it will be great for me.

Siddhant Kotambe
  • 3
  • 3

1 Answers1

0

You will have to rearange your appproach as following:

  • First you will place the big image with the first paragraph as you would normaly do.
  • Second you will place inside a div the small image and the second paragraph.
  • Lastly you will make this div position: absolute and then left: 50% (you can adjust this based on the result you want)

Example code given:

For the HTML:

  <div class="container">
      <img src="" alt="this is the big image" />
      <p>This is your big paragraph</p>
      <div class="small-container">
        <img src="" alt="small image" />
        <p>Small paragraph</p>
      </div>
    </div>

For the CSS:

/* This is the parent element */
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.small-container {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%; /*you might want to adjust this*/
}

Please consider though you should not share pitctures only screenshots and code! Check more here https://stackoverflow.com/help/how-to-ask

PTsag
  • 108
  • 2
  • 9