Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
14
respostas

card e Carousel

Referente ao curso Bootstrap 4: criando uma landing page responsiva

por Leveditor
| 124.1k xp | 228 posts

boa noite, estou tentando diminuir o card mais quando eu diminuo o card os items que estão dentro dele não diminui junto com ele . exemplo: a imagem o h5 e o p ficam fixo no lugar quando eu diminuo o card.

CSS

.style {
    width: 18rem;
    height: 20rem;
}

código do card HTML

<div class="card style">
                <img src="jeep1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

sobre o Carousel

como fazer esse tipo de Carousel que tem uma imagem pequenas em baixo dele

site de exemplo: https://www.winnipegdodge.com/vehicles/2017/dodge/journey/winnipeg/mb/41918737/

vcs teriam algum código de exemplo?

14 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Leveditor, tudo bem? Vamos lá:

estou tentando diminuir o card mais quando eu diminuo o card os items que estão dentro dele não diminui junto com ele . exemplo: a imagem o h5 e o p ficam fixo no lugar quando eu diminuo o card

Não entendi, o que seria esse "ficam fixo"?

como fazer esse tipo de Carousel que tem uma imagem pequenas em baixo dele

A ideia é você adicionar um listener de click para todas as imagens, assim que uma delas for clicada, você pega o src da imagem clicada e seta na imagem em destaque, algo assim:

https://jsfiddle.net/mahenrique94/jnyekbs4/

Espero ter ajudado.

por Leveditor
| 124.1k xp | 228 posts

é exatamente assim o Carousel mais teria como adicionar as setas para mudar de imagem uma do lado esquerdo e outro na direita?

sobre os cards teria algum lugar para eu mandar fotos para vocês ver como fica?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Teria sim, mas, precisa implementar, a ideia basicamente é a mesma.

Você pega a imagem anterior e seta o src dela na imagem em destaque, a seta para frente, você pega a próxima.

Espero ter ajudado.

por Leveditor
| 124.1k xp | 228 posts

Ok entendi.

E sobre os cards tem como fazer eles ficarem menores?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Esse problema eu precisaria visualizar para entender e te falar uma possível solução.

por Leveditor
| 124.1k xp | 228 posts

Ok, em qual lugar eu mando o print para vcs? Por e-mail?

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Poderia colocar a pasta do seu código no github por gentileza? Assim podemos analisar melhor o código.

por Leveditor
| 124.1k xp | 228 posts

não aprendi a usar o github ainda, sou novo em programação

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Segue um tutorial fácil de como criar um repositório e subir arquivos no Github sem precisar de linha de comando nem nada. (Porque se pesquisar no google vão querer que você saia dando comandos rsrsrs).

Primeiro de tudo crie uma conta no Github e logue nela. E vá seguindos os passos em azul. Alguma dúvida é só me perguntar. Clique no botão verde New ou arraste os arquivos se não estiver pegando bem a estrutura de pastas pegue a url que está aparecendo na barra de url

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Sobe no Google Drive então, zipa a pasta do projeto e sobe no Drive.

Fico no aguardo.

por Leveditor
| 124.1k xp | 228 posts

está la no github, eu apenas quero diminuir o card mais quando eu tento fazer isso não da certo da uma olhada na foto para ver como fica por favor

https://github.com/Leveditor/teste

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Dei uma olhada no repositório e vi que só tem a imagem, a gente precisa do projeto completo, com os códigos, pastas e arquivos.

Fico no aguardo.

por Leveditor
| 124.1k xp | 228 posts

Código HTML

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Bitter&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="teste2.css">
</head>
<body>


           <div class="card style">
              <img class="card-img-top" src="alura.jpg" alt="Imagem de capa do card">
                  <div class="card-body">
                    <h5 class="card-title">Título do card</h5>
                <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
            <a href="#" class="btn btn-primary">Visitar</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

código CSS

.style {
    width: 18rem;
    height: 380px;
}

body {

    background-color: red;

}
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Na classe .style você pode usar o

transform: scale(0.5) translate(-37%, -14%);

Use o scale para achar o tamanho que quer, e o translate para reposicionar o card na tela