Jump to content

john

Membros
 Ver Perfil  Ver atividades

  • Contagem de Conteúdo

    1

  • Ingressou

  • Última visita

 Tipo de Conteúdo 

Postagens postado por john

    Me ajudem sou iniciante, ao dar zoom (navegador) a img sobrepõem as demais imagens .

    em HTML & CSS

    Postado

    Tudo de bom para os senhores.

    Me chamo John, sou iniciante.

    Estou enfrentando o seguinte erro: Ao abrir a linguagem de texto html no navegar a img 2  sobrepõem as outras imagens não sendo responsiva igual as outras demais imgs. Isso ocorre ao dar Zoom na tela, somente a img card 2 acontece isso.

    poderiam dar uma olhada no html8 abaixo por favor.Gratidão .

     

    <!doctype html>
    <html lang="pt-br">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-escale=1">
    <title>Bootstrap5 CDN</title>
    <!--CSS-->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <!--stylesheet é uma declaração tipo em cascata-->


    </head>
    <body>
    <div class="container-fluid">
        <h1>Jumbotron & Cards</h1>
    </div>
    <div class="jumbotron Jumbotron">
        <div class="container-fluid">
            <hi class="display-4">Olá mundo!</hi>
            <p class="lead">Este é meu primeiro jumbotron</p>
            <a href="#" class="btn btn-primary">Saiba mais</a>

        </div>

    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <div class="card border border-primary bg-warning">
                    <div class="card-body ">
                        <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg " class="card-img-top">
                        <h5 class="card-title ">Meu card 1</h5>
                        <p class="card-text ">Olá, meu primeiro card</p>
                        <p href="# " class="btn btn-primary ">Saiba mais</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card border border-warning">
                    <div class="card-body ">
                        <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card rounded-circle">
                        <h5 class="card-title ">Meu card 2</h5>
                        <p class="card-text ">Olá, meu primeiro card</p>
                        <p href="# " class="btn btn-primary ">Saiba mais</p>
                    </div>
                </div>
            </div>
            <div class="col-3 ">
                <div class="card border border-seccess ">
                    <div class="card-body ">
                        <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card-img-top ">
                        <h5 class="card-title ">Meu card 3</h5>
                        <p class="card-text ">Olá, meu primeiro card</p>
                        <p href="# " class="btn btn-primary ">Saiba mais</p>
                    </div>
                </div>
            </div>
            <div class="col-3 ">
                <div class="card border border-danger ">
                    <div class="card-body ">
                        <img src="C:/Users/JOHNA/OneDrive/Área de Trabalho/Bootstrap/Bootstrap 5.1.3/Projetos/imagens/img/natureza1.jpg" class="card-img-top ">
                        <h5 class="card-title ">Meu card 4</h5>
                        <p class="card-text ">Olá, meu primeiro card</p>
                        <p href="# " class="btn btn-primary ">Saiba mais</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <p class="display-4">Trabalhando com texto</p>
            <p></p>
            <p>Meu texto</p>
            <h2 class="text-left">Meu texto</h2>
            <h2 class="text-center">Meu texto</h2>
            <h2 class="text-right">Meu texto</h2>
            <br>
            <h2 class="text-primary">Meu texto</h2>
            <h2 class="text-secondary">Meu texto</h2>
            <h2 class="text-warning">Meu texto</h2>
            <h2 class="text-success">Meu texto</h2>
            <h2 class="text-danger">Meu texto</h2>
            <h2 class="text-info">Meu texto</h2>
            <h2 class="text-dark">Meu texto</h2>
            <h2 class="text-light">Meu texto</h2>

        </div>
    </div>

    </div>
    <footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script><!--src é o source a fonte-->
    </footer>

    </body>
    </html>

×
×
  • Create New...