Tabela com imagem e textos linkados (html)

Detalhes da questão

Endereço do fórum: http://www.blrpg.com.br
Versão do fórum: phpBB3

Descrição

Bom dia, quero fazer uma pagina html e por igual nessa imagem


https://i.imgur.com/ye6biDi.png
Tirar essa parte que tem "detalhes" em baixo de comprar

me mostrar onde substituir o link do "comprar" e o valor e a imagem

Imagem utilizada nessa loja ai, pode usar ela,vou editar e troco
https://i.imgur.com/2JxIjPQ.png

Olá,

Infelizmente, nós não criamos páginas HTML.

Para saber mais, leia:
-> https://ajuda.forumeiros.com/t7967-faq-criar-uma-pagina-inicial-html-personalizada

O senhor pode usar este código que fiz como base:

Código:

<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  display: block;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

O resultado pode ser conferido aqui:
-> http://codepen.io/0Luiz/pen/oZVxBe

Luiz~ escreveu:Olá,

Infelizmente, nós não criamos páginas HTML.

Para saber mais, leia:
-> https://ajuda.forumeiros.com/t7967-faq-criar-uma-pagina-inicial-html-personalizada

O senhor pode usar este código que fiz como base:

Código:

<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  display: block;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

O resultado pode ser conferido aqui:
-> http://codepen.io/0Luiz/pen/oZVxBe

Ficou TOP, muito melhor do que o da imagem que pedi

Como faço pra adicionar mais 1 item desse?

Basta adicionar, depois de

<div class="row">

, este código:

Código:

<!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>

Que bom que o senhor gostou.

https://i.imgur.com/VAX64aO.png

Quando salvei a primeira vez ficou assim normal, depois ficou como mostra a imagem a cima

Olá,

Troque o código por este:

Código:

<div class="row">
 
  <!-- Item 1 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 2 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 3 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
 
  <!-- Item 4 -->
  <article class="item">
    <span class="price">100 000 créditos</span>
    <i class="fa fa-money" aria-hidden="true"></i>
    <span class="price">100 000</span>
    <span class="money-type">créditos</span>
    <footer>
      <span class="real-price">
        R$ 100,00
      </span>
      <button class="buy">
        <a href="LINK_DA_COMPRA">Comprar</a>
      </button>
    </footer>
  </article>
</div>

<!-- CSS BEGIN -->
<style type="text/css">
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i";
 
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div.row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
}
div.row article.item {
  width: 28%;
  background-color: #fff;
  border: solid 1px #197aff;
  margin: 60px 60px;
  padding: 20px;
  border-radius: 3px;
}
div.row article.item .price {
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money {
  color: #197aff;
  font-size: 120px;
  display: block;
  text-align: center;
}
div.row article.item .fa.fa-money + .price {
  font-size: 38px;
  font-weight: 300;
  color: #197aff;
}
div.row article.item .fa.fa-money + .price + .money-type {
  display: block;
  text-align: center;
  margin-top: -5px;
  font-size: 20px;
}
div.row article.item footer {
  display: block;
}
div.row article.item footer .real-price {
  text-align: left;
  font-weight: bold;
}
div.row article.item footer .buy {
  float: right;
  background-color: transparent;
  border: solid 1px #197aff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 15px;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy a {
  color: #333;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all ease-in 200ms;
  transition: all ease-in 200ms;
}
div.row article.item footer .buy:hover {
  background-color: #197aff;
}
div.row article.item footer .buy:hover a {
  color: #fff;
}
</style>

Continuo com o problema, quando salvo fica normal... ai o código se espalha e quando vizualiza novamente fica assim
Obs: É uma pagina html modo simples

Aí está o problema!
O senhor deve criar uma nova página no modo avançado, pois o modo simples não suporta o HTML muito bem.
Lembre-se de marcar a opção "Você deseja utilizar o início e o final da página do seu fórum" como "Não".

Luiz~ escreveu:

Aí está o problema!
O senhor deve criar uma nova página no modo avançado, pois o modo simples não suporta o HTML muito bem.
Lembre-se de marcar a opção "Você deseja utilizar o início e o final da página do seu fórum" como "Não".

Tudo bem, e pra substituir a imagem ali?

Qual imagem?
Não há nenhuma imagem nesta página HTML.

Luiz~ escreveu:Qual imagem?
Não há nenhuma imagem nesta página HTML.

Tem como no lugar de azul colocar verde por exemplo? Esse negocio que parece uma "imagem"
http://icon-icons.com/icons2/550/PNG/512/business-color_money-coins_icon-icons.com_53446.png
estilo esse

Fico do mesmo jeito Luiz, oque mais poderia ser?

Olá,

Para mudar a cor, procure todos os trechos com

#197aff

no código, e altere todos para a cor que o senhor deseje.

Quanto ao bug, poderia me informar o endereço de sua página HTML?

Luiz~ escreveu:Olá,

Para mudar a cor, procure todos os trechos com

#197aff

no código, e altere todos para a cor que o senhor deseje.

Quanto ao bug, poderia me informar o endereço de sua página HTML?

Vamos la


https://i.imgur.com/hgTgg1z.png

Nessas duas opções, o que marco?

Vou editar e vejo se dar erro e te envio link

Olá,

Desculpe-me se me expressei mal.
Eu quero o endereço de URL da sua página HTML.

Por exemplo

http://www.blrpg.com.br/h1-

, entendeu?

No mais, as opções que o senhor mostrou nas imagens acima estão corretas... Estranho...

Luiz~ escreveu:Olá,

Desculpe-me se me expressei mal.
Eu quero o endereço de URL da sua página HTML.

Por exemplo

http://www.blrpg.com.br/h1-

, entendeu?

No mais, as opções que o senhor mostrou nas imagens acima estão corretas... Estranho...

http://www.blrpg.com.br/h12-loja-virar-conta-premium
Agora esta ok, mais veja a imagem a baixo


https://i.imgur.com/0keIE2B.png

Ele fico todo espalhado, viu? Creio eu se eu salvar novamente, se desfaz

A velho fico muito bom, quero ajeitar isso rsrs

@Edit

Sou muito censurado Luiz, iriamos passar o dia todo e nunca iriamos conseguir... Desculpas rs
Quando é pra editar, tem 2 opções : Editar modo simples e modo avançado, eu colocava pra criar em modo avançado mais na hora de editar selecionava o modo simples. o modo avançado, quase nao da pra ver.... por isso rsrs

Desculpas !

Sem problemas.

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".