Html Question posted in
Some basic documentation can be found here.

Html – How to create a layout for a quote with image and caption?

I want to have this layout:

My try:

.container{
  padding: 10 px;
  gap: 10 px;
  flex-direction: row;
}
figcaption{
  font-size: smaller;
  text-align: end;
}
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!</blockquote>

<figure class="container">
<figcaption>
  <strong>John Doe</strong><br>
  Long title blablablablabla<br>
  Company X
</figcaption>
<img class="col2" src="https://placehold.co/600x400">
<figure>

I don’t know how to make it better. Can you help me improve it?

Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            align-items: center;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .text-container {
            flex: 1;
            text-align: left;
            margin-right: 20px;
        }

        .quote {
            margin-bottom: 20px;
            font-size: 1.2em;
        }

        .image-container {
            flex: 0 0 auto;
        }

        .image-container img {
            max-width: 150px;
            height: auto;
        }

        .caption {
            font-weight: bold;
        }

        .sub-caption {
            font-size: 0.9em;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text-container">
            <div class="quote">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!
            </div>
            <div class="caption">John Doe</div>
            <div class="sub-caption">Long title blablablablabla<br>Company X</div>
        </div>
        <div class="image-container">
            <img src="https://placehold.co/160x320" alt="Image Description">
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Something like this:

    * {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
::before,
::after {
  box-sizing: inherit;
}

.wrap {
  display: flex;
  border: 1px solid green;
  gap: .25em;
  margin: 1em;
}
.details {
  display: flex;
  flex-direction: column;
}

.details blockquote {
  margin-bottom:auto;
  text-align: justify;
  display: flex;
  align-items: center;
}

blockquote:before, blockquote:after {
  content: '“';
  font-size: 4em;
  padding: 0 .25em;
}

blockquote:after  {
  align-self: end;
  content: '”';
}

.details div {
  align-self: end;
}

div img {
  max-width: 100%;
  height: auto;
  display: block;
}

span {
  align-self: end;
}
    <div class="wrap">
  <div class="details">
    <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!</blockquote>
    <div><strong>John Doe</strong></div>
    <div>Long title blablablablabla</div>
    <div>Company X</div>
  </div>

  <div><img class="col2" src="https://placehold.co/600x400"></div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search