How to put images (svg) beside text?

user_19779574 0
Viewed 70

First of all, sorry for my bad English, hopefully, I've written this well. I have tried many solutions on this web but I can't fix my problem.

I'm a beginner in HTML & CSS so maybe that is the reason. I'm new at this and trying to improve. I would be really grateful for your help.

What I want to do is to obtain a design like this: My first attempt worked but I can't replicate this look in other images:

My first attempt, it worked but I can't replicate this look in other images

I've tried to copy the CSS properties This is just how it's default generated (I don't know how to obtain the same design from above):

This is just how it's default generated

Here's the HTML/CSS of the working part on codeshare, and here's the non-working code on codeshare.

In case the link doesn't work, here's alternative code that doesn't work:

<style>
      .info2 {
        display: inline-block;
        font-family: 'Staatliches', cursive;
        font-size: 25px;        
      }
      div.info2 {
        display: inline-block;
        width: 170px;
        height: 50px;
      }
        .resp2 {
        display: inline-block;
        font-family: roboto;
        padding: 2px;
        width: 200px;
      }
        .info3 {
        display: inline-block;
        font-family: 'Staatliches', cursive;
        font-size: 25px;        
      }
      div.info3 {
        display: inline-block;
        width: 210px;
        height: 50px;
      }
      div.info3resp3 {
        display: inline-block;
      }
        .resp3 {
        display: inline-block;
        font-family: roboto;
        padding: 2px;
        width: 200px;
      }
</style>
<div class="info2resp2">
    <div class="info2">
    <p>Vende/Compra tu casa</p>
    </div>
    <div class="icon2-div"> <img class="icon2" src="/icons/icon2svg.svg" alt=""> </div>

    <div class="resp2">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. 
    Donec semper purus ac erat 
    dignissim, non gravida 
    dui ullamcorper. In suscipit. &#127969 </p>
    </div>
  </div>
    
  <div class="info3resp3">
    <div class="icon3-div"> <img class="icon3" src="/icons/icon3svg.svg" alt=""> </div> 
    <div class="info3">
    <p>Todo detallado</p>
    </div>
    <div class="resp3">
    <p>Lorem ipsum dolor sit amet, 
     consectetur adipiscing elit. 
      Donec semper purus ac erat 
     dignissim, non gravida </p>

code that works:

<style>
.info1 {
        display: inline-block;
        font-family: 'Staatliches', cursive;
        font-size: 25px;      
      }
      div.info1 {
        display: inline-block;
        width: 170px;
        height: 50px;
  }
         .resp1 {
        display: inline-block;
        font-family: roboto;
        padding: 2px;
        width: 200px;
      }
      div.resp1 {
        display: inline-block;
        width: 200px; 
        }
</style>
<div class="info1resp1"> 
    <img class="icon1" src="/icons/icon1svg.svg" alt="">
    <div class="info1">
    <p>Perfiles Seguros</p>
    </div>
    <div class="resp1">
    <p>Asociados a un RUT verificado
    asociado a la cédula de identidad,
    puedes confiar en que estés
    hablando con una persona real y
    tendrás acceso a algunos de sus datos
    importantes. &#9989</p>
    </div>

css image html
1 Answers

i think u should learn layouting using flex and grid.

.card {
  background-color: black;
  width: 240px;
  height: 270px;
  display: flex;


}

.icon1{
  width: 75px;
  height: 75px;
}

.wrapper {
  
}
p{
  color: white;
}

.wrapper p:nth-child(1){
  margin: 20px 0 ;
  
}


*{
  box-sizing: border-box;
  padding : 0 ;
  margin: 0;
}
<div class="card">
    <img class="icon1" src="https://via.placeholder.com/150.svg" alt="">
  <div class="wrapper">
     <p>Perfiles Seguros</p>
          <p>Asociados a un RUT verificado
      asociado a la cédula de identidad,
      puedes confiar en que estés
      hablando con una persona real y
      tendrás acceso a algunos de sus datos
      importantes. &#9989</p>
  </div>
</div>

user_193519660
Related