CSS Como criar cartões de propaganda?

[RockMagicRevived]

Olá, estou interessado em criar cartões de propagando, exemplo, na Udemy quando você vai olhar os cursos ficam aqueles cartões, com o nome do curso, foto, estrelas, valor, eu quero fazer um daquele, só que não sei por onde começar, apenas quero fazer o cartão, sem utilizar nenhuma outra linguagem, apenas HTML e CSS, é possivel? se sim, como faço?

[Leonardo0308]

Bom dia @RockMagicRevived

 

Seria tipo isso?

 

https://www.w3schools.com/howto/howto_css_pricing_table.asp

[RockMagicRevived]

@Leonardo0308 Mais ou menos isso, só que com uma foto do que quero vender, tipo isso aqui https://www.udemy.com/ - esses cartões com o cursos, eu quero um igual a esse ai

[Matheus Lopes Marques]

É possível, só que para cada item, voce terá que adicionar manualmente.

Mas como você irá fazer para realmente finalizar a compra? a pessoa clica e é redireciona (por exemplo) para o paypal?

é bom dar uma olhada em javascript puro, ou jquery, que pode lhe dar uma ajuda boa com isso, nas questões de animações

[RockMagicRevived]

@matheus lopes marques No momento, o meu foco é criar os cartoes, onde está a minha primeira dificuldade, sobre a compra e tal, a minha ideia é a pessoa clicar no cartão, em qualquer espaço dele e ser direcionado, mas ai depois eu vejo como fica

adicionado 0 minutos depois

@matheus lopes marques Mas, voltando, como faço esses cartões? alguma dica, ideia?

[Matheus Lopes Marques]

Se quer fazer clicando em qualquer local dele, envolva ele com uma tag de link

<a href="link aqui">

resto do cartão

</a>

 

ai o resto depende do estilo que quer, cores, etc. Mas geralmente se inicia uma div "global", dps nome do produto, algo relacionado ao produto(imagem, descrição, etc), preço, e botao de comprar(acho q n teria, pois ira clicar em qualquer local...).

 

Recomendo dar uma olhada nos recursos do css4 e usar o flexbox, pode lhe ajudar caso tenha que colocar varios cartões lado a lado.

[RockMagicRevived]

Entendi, @matheus lopes marques agora, eu to em duvida como começar, no caso, eu pegaria a imagem colocaria uma borda e limitaria o tamanho dela, e colocaria uma legenda? seria isso o cartão?

[Matheus Lopes Marques]

Não, voce tem que criar o cartão com css/html '-'

se colocar apenas uma imagem com borda não passa essa impressão de cartão.

 

faz algo tipo

<a>

<h1>nome do produto</h1>

<img src="link da imagem">

<p>descrição</p>

<span> ou <b> preço </span> ou </b>

</a>

 

se for necessario adicione mais coisas, etc.

Faça estilização com o css que ficará legal  evite usar apenas a imagem e texto

[DiF]

@RockMagicRevived Basicamente, em outras palavras.

Você vai usar um elemento  HTML e colocar o conteúdo dentro. 

Imagine como uma seção de um site, só que só apenas ele.

 

Por exemplo:

<div class="cartao">
  <header>Titulo</header>
  <section>
     Conteúdo
  </section> 
</div>

O exemplo é bastante simples, mas é por aí. Dentro dali você vai colocar imagens.. até tabelas se necessário..

O resto você estiliza com CSS!