Widget de informações customizado

Detalhes da questão

Endereço do fórum: https://www.canalinterativoonline.com/
Versão do fórum: ModernBB

Descrição

Gostaria de padronizar as imagens deste código , ou seja , que todas imagens que colocasse no local das imagens em seu devido URL da imagem elas ficassem do mesmo tamanho em tiversos widgets criados com o mesmo código sem a necessidade de ficar editando o tamanho da  imagem manualmente  , segue código

Código:

<div class="newmodule">
            <br />            
 <div class="imgref">
                <img class="imgref1" alt="Trem" src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" />            
 </div>
                      
 <div class="titulo">
    Senac São João                
 </div><br /><br />            
 <div class="desctop">
               Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.          
 </div><br /><br />            
 <form action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos" method="get">
                      
 <button class="bottom" type="submit">
            LER MAIS!            
 </button>
                      
 </form>
</div><style>
img.imgref1 {
    width: 350px!important;
    height: 251px!important;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Olá @EDU2010,

Altere o seu código para o seguinte:

Código:

<div class="newmodule">
        
   <div class="newmodule_img">
              <img src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" alt="Trem" />                           
   </div>
        
   <div class="newmodule_content">
               
      <div class="titulo">
                   Senac São João                                   
      </div>
               
      <div class="desctop">
                   Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                             
      </div>
               
      <form method="get" action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos">
                    
         <button type="submit" class="bottom">
                      LER MAIS!                                     
         </button>
                  
      </form>
           
   </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  max-width: 100%!important;
  height: auto!important;
  float: left;
  padding: 5px;
  }
  .newmodule_content {
  width: 80%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid #1f6bd8;
  border-radius: 14px;
  width: 104px;
  height: 41px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #1f6bd8;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #2e61ab;
  text-decoration: underline;
  }
</style>

E diga-me se é o que o Senhor deseja!


Atenciosamente,
pedxz.

a imagem ficou muito pequena amigo , eu desejava que ela ficasse tipo uns 300px por 250 px por exemplo , que eu pudesse alterar este valor ..

Até mais

Olá!

Altere para:

Código:

<div class="newmodule">
       
  <div class="newmodule_img">
              <img src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" alt="Trem" />                         
  </div>
       
  <div class="newmodule_content">
             
      <div class="titulo">
                  Senac São João                                 
      </div>
             
      <div class="desctop">
                  Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                           
      </div>
             
      <form method="get" action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos">
                   
        <button type="submit" class="bottom">
                      LER MAIS!                                   
        </button>
                 
      </form>
         
  </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  max-width: 100%!important;
  height: auto!important;
  float: left;
  padding: 5px;
  }
  .newmodule_content {
  width: 80%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid #1f6bd8;
  border-radius: 14px;
  width: 300px;
  height: 250px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #1f6bd8;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #2e61ab;
  text-decoration: underline;
  }
</style>

Aguardo respostas!

EDU2010 escreveu:a imagem ficou muito pequena amigo , eu desejava que ela ficasse tipo uns 300px  por 250 px por exemplo , que eu pudesse alterar este valor ..

Até mais

Com o Senhor não tinha dado medida eu limitei a imagem, mas troque para:

Código:

<div class="newmodule">
                        
   <div class="newmodule_img">
                        <img src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" alt="Trem" />                                 
   </div>
                        
   <div class="newmodule_content">
                                     
      <div class="titulo">
                                 Senac São João                                             
      </div>
                                     
      <div class="desctop">
                                 Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                                       
      </div>
                                     
      <form method="get" action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos">
                                                
         <button type="submit" class="bottom">
                                      LER MAIS!                                                   
         </button>
                                          
      </form>
                             
   </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  float: left;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  width: 300px!important;
  height: 250px!important;
  padding: 5px;
  }
  .newmodule_content {
  width: 60%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid #1f6bd8;
  border-radius: 14px;
  width: 104px;
  height: 41px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #1f6bd8;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #2e61ab;
  text-decoration: underline;
  }
</style>

Ficou bom do tamanho das imagens amigo , e como trocar a cor do ´´ LER MAIS `` tirar ele de azul e colocar de preto ou mesmo outra cor !? Obrigado

Olá!

É isso o desejado?

Código:

<div class="newmodule">
                       
  <div class="newmodule_img">
                        <img src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" alt="Trem" />                               
  </div>
                       
  <div class="newmodule_content">
                                   
      <div class="titulo">
                                Senac São João                                           
      </div>
                                   
      <div class="desctop">
                                Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                                     
      </div>
                                   
      <form method="get" action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos">
                                               
        <button type="submit" class="bottom">
                                      LER MAIS!                                                 
        </button>
                                         
      </form>
                           
  </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  float: left;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  width: 300px!important;
  height: 250px!important;
  padding: 5px;
  }
  .newmodule_content {
  width: 60%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid #000000;
  border-radius: 14px;
  width: 104px;
  height: 41px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #1f6bd8;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #2e61ab;
  text-decoration: underline;
  }
</style>

Aguardo respostas!

Não resultou não , continuou azul da mesma forma !

Altere para:

Código:

<div class="newmodule">
                              
   <div class="newmodule_img">
                              <img alt="Trem" src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" />                                   
   </div>
                              
   <div class="newmodule_content">
                                                 
      <div class="titulo">
                                         Senac São João                                                   
      </div>
                                                 
      <div class="desctop">
                                         Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                                             
      </div>
                                                 
      <form action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos" method="get">
                                                                  
         <button class="bottom" type="submit">
                                                  LER MAIS!                                                           
         </button>
                                                        
      </form>
                                     
   </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  float: left;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  width: 300px!important;
  height: 250px!important;
  padding: 5px;
  }
  .newmodule_content {
  width: 60%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid black;
  border-radius: 14px;
  width: 104px;
  height: 41px;
  font-family: 'Roboto Condensed', sans-serif;
  color: black;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #2e3131;
  text-decoration: underline;
  }
</style>

Não resultou , ficou em outra cor porém bagunçou toda ordem do código !!??

Olá!

Altere para:

Código:

<div class="newmodule">
                     
  <div class="newmodule_img">
                        <img src="https://image.slidesharecdn.com/senacassistentedemarketingaula02-160623194120/95/senac-assistente-de-marketing-aula-02-1-638.jpg?cb=1467318521" alt="Trem" />                             
  </div>
                     
  <div class="newmodule_content">
                                 
      <div class="titulo">
                                Senac São João                                         
      </div>
                                 
      <div class="desctop">
                                Diversificando a oferta de cursos e reforçando sua referência já consolidada na área de educação profissional em São João da Boa Vista.                                   
      </div>
                                 
      <form method="get" action="https://www.canalinterativoonline.com/t359-senac-sao-joao-da-boa-vista-amplia-portfolio-de-cursos">
                                             
        <button type="submit" class="bottom">
                                      LER MAIS!                                               
        </button>
                                       
      </form>
                         
  </div>
</div><style>
  .newmodule {
  width: 100%;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-bottom: 10px;
  }
  .newmodule_img {
  float: left;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  .newmodule_img img {
  width: 300px!important;
  height: 250px!important;
  padding: 5px;
  }
  .newmodule_content {
  width: 60%;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  }
  .titulo {
  padding: 10px;
  color: black;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  }
  .desctop {
  padding: 10px;
  }
  button.bottom {
  padding: 4px;
  border: 3px solid #000000;
  border-radius: 14px;
  width: 104px;
  height: 41px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #1f6bd8;
  font-weight: bold;
  margin-top: 6px;
  margin-left: 10px;
  }
  button.bottom:hover {
  border: 3px solid #000000;
  text-decoration: underline;
  }
</style>

Aguardo respostas!