Sobrepor form-selector em cima de uma imagem | Bootstrap 4: criando uma landing page responsiva

6
respostas

Referente ao curso Bootstrap 4: criando uma landing page responsiva

por Elenir

| 31.9k xp | 20 posts

Boa noite!!!

Estou começando na parte do front-end então preciso fazer o site com uma imagem de fundo, sobre isso 3 imagens na parte do conteúdo, sendo que na ultima onde ai ter uma mão segurando o celular eu preciso colocar o form-select encaixando ali dentro e retornar o resultado tb encaixando ali.

Coloco as imagens em anexo, pois não sei se consigo fazer isso com um card, se alguem puder me dar uma dica de como posicionar isso.

O backend já está funcionando.

Segue em anexo a imagem.

Desde já agradeço,

Elenir

6 respostas

por Erika Freitas

| 17.7k xp | 8 posts

Estagiária de Desenvolvimento

09/08/2021

Olá, Elenir, tudo bem? Você consegue compartilhar o código pra eu entender melhor como você está trabalhando essa página?

Sem ver a estrutura, eu churataria colocar os selects em posição absoluta em relação à imagem.

por Elenir

| 31.9k xp | 20 posts

09/08/2021

Bom dia Erika, tudo bem sim e você, na correria, mas ainda bem crua, muita coisa pra aprender e a necessidade da empresa pra colocar no ar amanhã.

Erika acabei vendo um curso de CSS GRID LAYOUT que me ajudou bastante, mas ainda tenho várias coisas pra ajustar: 1 - (mais urgente) imagem parte 3, tenho esse modal onde mostra o resultado da pesquisa, mas tb preciso encaixar ele no mesmo local onde ficou a pesquisa e não estou conseguindo fazer isso. 1.1 preciso que fique nessa ordem: nome 1o linha, endereço na 2a linha e depois o telefone e um botão para fazer o contato com o tal telefone, como na imagem "resultado-pesquisa"

2 - como por exemplo no arquivo parte1 em anexo, onde as imagens parece que some uma parte, usei a propriedade cover para preencher todo o espaçao, mas talvez deva precisar de mais alguma coisa.

3 - o meu rodapé não ficou bem no fundo da página 4 - no topo que queria que o a borda ficasse somente ao redor das palavras, mais afastada em cima, coloquei o padding, mas continua grudada.

Se puder me dar uma dicas, fico muito grata. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Elenir

| 31.9k xp | 20 posts

09/08/2021

Segue o codigo:

STYLE.CSS

.app {
    /*background: #f1f1f1;*/
    background-image: url("../images/fundo.png");
    display: grid;  
    font-family: Segoe UI, sans-serif;
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 100px 100vh 60px;
}

.cabecalho {
    grid-area: cabecalho;
}

.conteudo {
    grid-area: conteudo;
    padding-top: 10%;
    padding-left: 3% ; 
    padding-right: 3% ;
    z-index: 500;
}

.rodape {
    background: #f1f1f1;
    grid-area: rodape;
}

.cor_de_botao {
    background-color: black;
    color: #8b5b29;
    border-color: #8b5b29;
    border-width:medium;
    border-style: solid;
    border-radius: 50px 50px 50px 50px !important;
    height: 10% !important;
}

TITULO.CSS

.titulo {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    grid-template-rows:100%;
    height:100px;
}

.titulo__principal{
    /*background: url(../images/frasenotopo.png) top / no-repeat;*/
    /*background: #ff8834;*/
    padding-top: 20px;
    border-color: #8b5b29;
    border-width:medium;
    border-style: solid;
    padding-bottom: 20px;
    color: #c67d30 ;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding-top: 20px;
    text-align: center;
    /*z-index: 10;*/
}

por Elenir

| 31.9k xp | 20 posts

09/08/2021

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gloss Express</title>   
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> 
    <link href="./css/mormalize.css" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./css/desenhomapa.css"rel="stylesheet" >
    <link href="./css/titulo.css"rel="stylesheet" >
</head>

<body class="app">
    <header class="cabecalho">
        <section class="titulo">
            <div class="titulo__principal caixa">
                <h3 class="titulo__titulo"> ENCONTRE O SALÃO DE BELEZA</h3>
                <h3 class="titulo__titulo">          + PRÓXIMO de VOCÊ</h3>

            </div>
            <div class="titulo__secundario caixa">
                <h3 class="titulo__titulo"></h3>
            </div>
            <div class="titulo__secundario caixa">
                <h3 class="titulo__titulo"></h3>
            </div>
        </section>
    </header>

    <main class="conteudo">
        <section class="desenhomapa">
            <div class="desenhomapa__principal caixa">
                <h3 class="desenhomapa__titulo"></h3>
            </div>

            <div class="desenhomapa__secundario caixa">
                <h3 class="desenhomapa__titulo"> </h3>
            </div>

            <div class="desenhomapa__secundario caixa">
                <h3 class="desenhomapa__titulo"></h3>

                <div class="pesquisaestado">
                    <div class=" my-2 default-text">Selecione o estado</div>
                    <div class="mb-2">
                        <select id="estado-combo" class="form-select" aria-label="Selecione o estado" style="border-radius: 50px 50px 50px 50px"></select>
                    </div>
                 </div>

                <div class="pesquisacidade">  
                    <div class="my-2 default-text">Selecione a cidade</div>
                    <div class="mb-2">
                        <select id="cidade-combo" class="form-select" aria-label="Selecione a cidade" style="border-radius: 50px 50px 50px 50px"></select>
                    </div>
                </div>

                <div class="pesquisabotao">  
                    <div class="my-4">
                        <button id="search"type="button" class="btn cor_de_botao btn-sm">PESQUISAR</button>
                     </div>
                </div>

                <div class="clientes">  
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Salões de Beleza</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div id="content-modal" class="modal-body"></div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                            </div>
                        </div>
                    </div>   
                </div>
            </div>
        </section>
    </Main>

    <script src="./assets/js/fontawesome.all.min.js"></script>
    <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>
    <script src="app.js"></script>

</body>

<footer class="rodape bg-secondary p-3">
    <p class="text-light m-0 text-center">contato: <a class="text-light" href="mailto:email@xxx.com.br">email@xxx.com.br</a></p>
</footer>
</html>

por Erika Freitas

| 17.7k xp | 8 posts

Estagiária de Desenvolvimento

10/08/2021

Oi, Elenir, então eu não reconheci nenhuma definição de altura no seu css.

Tenta setar algo baseado em vh como unidade porque pega porcentagem do seu viewport (da tela em que está seu site/aplicação), algo nessa linha aqui:

.cabecalho {
    height: 20vh
}
.conteudo {
    height: 70vh
}
.rodape {
    height: 10vh
}

Assim, ele vai pegar 20% de altura pro seu cabeçalho, 70% pro conteúdo e 10% pro rodapé. Vai ajustando conforme sua necessidade. Eu acredito que isso resolve o problema do seu rodapé.

Também não vi definição no tamanho do modal, sugiro ajustar a largura dele pra que tenha espaço pra informações. Eu não conheço muito de grid (uso mais flexbox) , desculpa.

Sobre a imagem não ocupar o espaço, tenta colocar ela como bg da div pelo css e usar cover tbm:

div {
  background-image: url('caminho-da-imagem.png');
 }

por Elenir

| 31.9k xp | 20 posts

11/08/2021

Erika bom dia, como voce está?

Desisti de usar o Modal, acabei fazendo uma tabela e listando as linhas.

Muito obrigada pelas dicas, como o curso foi adquirido a poucos dias e tinha essa demanda com urgencia, ainda está bem complicado, som os cursos mais ficar mais fácil.

Atenciosamente,

Elenir

PRORROGAMOS O DESCONTO!