How to place image on the right, followed by a title and subtitle on the left?-CodePudding

[how do I make something like this, I need it for a school project :)(https://i.stack.imgur.com/n86zT.png)

<div class = "content">
    <p class = "title">Intro to HTML</p>
    <p class = "text">Sample Subtitle</p>
        <div>
            <img class = "thumbnail" src="personalp.webp">
        </div>
</div>

this is what i got

CodePudding user response：

It's really difficult to give you an answer since we don't know what you will add to this basic template. I agree with the grid solution and flex may help you to. Please add more details about your whole project.

You don't tell anything about the manner of you want to align the elements to the top, if there will be additional content below this layout...

        html body{
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
            box-sizing: border-box;
        }
        .content{
            display:flex;
            padding:20px;
        }
        .leftColumn{
            background-color:antiquewhite;
            padding-left: 20px;
            padding-right: 20px;
        }
        .title{
            text-align: center;
            font-size: 1.8em;
            margin:0px;
        }
        .text{
            text-align: center;
        }
        .lipsum{
            font-style: italic;
        }
        .image{
            border:1px solid #000000;
            width:200px;
            height:200px;
        }

    <div class = "content">
        <div >
            <p class = "title">Intro to HTML</p>
            <p class = "text">Sample Subtitle</p>
            <p class = "lipsum">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id volutpat felis, ut maximus tellus. Quisque convallis accumsan volutpat. Etiam a eros quis tellus scelerisque elementum sed at nibh.
            </p>
        </div>
        <div >
            <img class = "thumbnail" src="https://dummyimage.com/200x200/999999/fff.png" alt="image">
        </div>
    </div>

Have a nice day.

CodePudding user response：

you can use inline CSS in your parent div like this:

 <div style="width:800px;margin:0 auto;display: flex;flex-direction:row;align-items:center;justify-content: space-around">
    <div>
        <h1>title here</h1>
        <p>Stuff inside paragraph</p>
    </div>
    <div>
        Image here
    </div>
</div>

CodePudding user response：

Try this:

.content {
  background: #f0f0f0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  padding: 1.5rem;
}

.text {
  text-align: center;
}

<div >
  <div >
    <h1 >Intro to HTML</h1>
    <p >Sample Subtitle</p>
  </div>
  
  <div>
    <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4wGRN9XoPDaJKv2hBEKC0RDsWAoNSrYMlTw&usqp=CAU">
  </div>
</div>

CodePudding user response：

This is your code :

<div class = "content">
    <p class = "title">Intro to HTML</p>
    <p class = "text">Sample Subtitle</p>
     <div>
       <img class = "thumbnail" src="personalp.webp">
     </div>
</div>

You can add the title and subtitle inside a div like this :

<div class = "content">
<div class ="text-info>
    <p class = "title">Intro to HTML</p>
    <p class = "text">Sample Subtitle</p>
</div>
<div>
     <img class = "thumbnail" src="personalp.webp">
</div>
</div>

Then you can use css to style the content as you want like this :

.content{
display:flex;
justify-content: center;
align-items : center;
}

It will move the titles on the left and image on the right side as you asked for. If you need more help ask in the comments I will answer