0

I'm trying to mimic a website. I'm using flex for my divs, but they are not properly aligning.

What mine looks like: https://i.stack.imgur.com/8xl7e.png

What I want it to look like: https://i.stack.imgur.com/uPFQF.png

My Code:

 <div class="div1">
    <img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
    <p class=""> cookies are great! </p>
    <a class="modulbutton" href="#open1">Open modal link</a>

    <div class="div1">
      <img src="https://i.imgur.com/kdOyxwV.png" class="image" alt="icecream picture">
      <p class=""> Ice cream is great! </p>
      <a class="modulbutton" href="#open1">Open modal link</a>


  <div id="open1" class="modalwindow">
     <div class="msgblock">
          <h1>Heading</h1>
          <p>some text</p>
           <img src="2.jpg" alt="missing">
          <div class="">  <a href="#">Close</a></div>


     </div>
  </div>
  </body>
  <footer>
    <style>

    .div1 {
      width: 900px;
      height: 400px;
      border: 3px solid blue;
      display: flex;
      align-items: center;
    }

.modulbutton{
  background-color: green;
  color: white;
  padding: 3%;
  text-decoration: none;
}

Any help would be greatly appreciated, I can't seem to align the description text and modal button properly on the bottom of the image.

Thanks!

Ashley1114
  • 37
  • 4

1 Answers1

0

what you need to do is put the p tag and a tag in a div under div1 then use flex direction in css on your div 1

<div class="div1">
        <img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
    <div> <p class="indent"> cookies are great! </p>
        <a class="modulbutton" href="#open1">Open modal link</a>
    </div>
    </div>


 .div1 {
    width: 900px;
    height: 400px;
    border: 3px solid blue;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
Hillary Etafo
  • 18
  • 4