Jump to content
DinhoPHP

Preciso desse estilo visual

Recommended Posts

Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!

 

Não consegui enviar a imagem por erro no site deste fórum.

Share this post


Link to post
Share on other sites

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ? 

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

 

Passa mais informações pra podermos te ajudar...

Share this post


Link to post
Share on other sites
2 horas atrás, lciceris disse:

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ? 

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

 

Passa mais informações pra podermos te ajudar...

 

Obrigado pelo interesse em ajudar. Então, segue o código do menu do site do meu cliente:

 

bloco_filtroM.php

<script>
	urlFiltro = "<?php echo $ROOTPATH; ?>/ajax/filtro_pesquisa.php";
	jQuery(function() {
		jQuery('#uf').bind('change', function(ev) {
			jQuery.ajax({
			   type: 'POST',
			   url: urlFiltro,
			   data: { filtro: 'cidades', estado: jQuery('#uf').val() },
			   beforeSend: function() {
					jQuery('#city').html('<option>Carregando...</option>');
					jQuery('#select_imob_bairro').html('<option></option>');
				},
				success: function(r) {
					jQuery('#city').html(r);
				}
			});
			
		});
	});
</script>  
<div class="buscaMobile">
	<form id="search-form">
		<div class="linkNavForm">
            <button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
			<a data-id="show" href="#" style="color: #f26122; margin-right: 55px;">				Exibir busca
			</a>
		</div>
		<div class="rowForm">	
			<label>Finalidade</label>
			<select class="comprar" name="transacao" id="sl-transacao">
				<option value="comprar">Comprar</option>
				<option value="alugar">Alugar</option>
				<option value="alugar-temporada">Alugar temporada</option>
				<option value="lancamentos">Lançamentos</option>
			</select>       
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Tipos de imóvel</label>
					<select class="tipoimovel" name="tipoimovel" id="sl-tipoimovel">
						<option value="">Tipos de imóvel</option>
						<?php
							while($row = mysql_fetch_assoc($tipos)) {
							
								$nome = utf8_decode(tratamento_string($row["nome"]));
						?>
						<option value="<?php echo $nome; ?>"><?php echo utf8_decode($row["nome"]); ?></option>
						<?php
							}
						?>
					</select>
				</div> 
			</section> 
		</div>		
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Quartos</label>
					<select class="quantidade_quartos" id="quantidade_quartos">
						<option value="0">Quartos</option>
						<option value="1-quarto">1 quarto</option>
						<option value="2-quartos">2 quartos</option>
						<option value="3-quartos">3 quartos</option>
						<option value="4-quartos">4 quartos</option>
						<option value="5-quartos">5+ quartos</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Vagas</label>
					<select class="quantidade_vagas" id="quantidade_vagas">
						<option value="0">Vagas</option>
						<option value="1-vaga">1 vaga</option>
						<option value="2-vagas">2 vagas</option>
						<option value="3-vagas">3 vagas</option>
						<option value="4-vagas">4 vagas</option>
						<option value="5-vagas">5+ vagas</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Estado</label>
					<select name="uf" id="uf" class="uf">
						<option value="">Todos os estados</option>
						<option value="AC">Acre</option>
						<option value="AL">Alagoas</option>
						<option value="AM">Amazonas</option>
						<option value="AP">Amapá</option>
						<option value="BA">Bahia</option>
						<option value="CE">Ceará</option>
						<option value="DF">Distrito Federal</option>
						<option value="ES">Espírito Santo</option>
						<option value="GO">Goiás</option>
						<option value="MA">Maranhão</option>
						<option value="MG">Minas Gerais</option>
						<option value="MS">Mato Grosso do Sul</option>
						<option value="MT">Mato Grosso</option>
						<option value="PA">Pará</option>
						<option value="PB">Paraíba</option>
						<option value="PE">Pernambuco</option>
						<option value="PI">Piauí</option>
						<option value="PR">Paraná</option>
						<option value="RJ">Rio de Janeiro</option>
						<option value="RN">Rio Grande do Norte</option>
						<option value="RO">Rondônia</option>
						<option value="RR">Roraima</option>
						<option value="RS">Rio Grande do Sul</option>
						<option value="SC">Santa Catarina</option>
						<option value="SE">Sergipe</option>
						<option value="SP">São Paulo</option>
						<option value="TO">Tocantins</option>
					</select>	
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Cidade</label>
					<select class="city" id="city">
						<option value="">Todas as cidades</option>
						<?php
							while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {
								
								if ($_REQUEST['city_id'] == $row['id']) {
									echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
								} 
								else {
									echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
								}
							}
						?>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
		</div>
	</form>

Desejo deixar igual ao do zapimoveis

Share this post


Link to post
Share on other sites

estilo do menu

.buscaMobile {
		top: 0px;
		position: relative;
		display: flex;
		justify-content: center;
	}
	
	.buscaMobile select {
		font-size: 13px;
		margin-top: 5px;
		width: 100%;
	}
	
	.buscaMobile label {
		font-size: 14px;
		font-weight: bold;
	}

.rowForm {
		height: 55px;
		margin-bottom: 5px;
		margin-top: 5px;
		overflow: hidden;
		width: 100%;
	}
	
	.linkNavForm {
		width: 100%;
		margin-top: 10px;
	}
	
	.linkNavForm a {
		color: #666;
		font-size: 13px;
		float: right;
		text-align: right;
    }

    

 

Share this post


Link to post
Share on other sites
10 horas atrás, Aphrodi disse:

Esse menu que você quer? 

http://prntscr.com/h1og5e

Sim, mas a parte quando clica na busca avançada, aparece os "botões" com os ícones que ao passar o mouse surge uma barra de rolagem. Estou procurando estilizar aqui, quando chegar nessa parte do hover ou a dificuldade que eu sentir, retornarei. Mas tendo alguma orientação, é só falar!

Share this post


Link to post
Share on other sites
9 horas atrás, Aphrodi disse:

Me envie o código com css que você conseguiu até agora

Tive alguns contra tempos durante o dia, mas segue os códigos. Enviarei o HTML novamente pois tive que fazer alterações. O resultado pode ser visto em acessando o site em modo mobile no Chrome, na resolução recomendada width 499px

 

HTML

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#dpalavra_chave input{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		width: 100%;
		display: table-footer-group;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		width: 100%;
		margin-left: -40px;
	}

css

OBS.: NÃO CONSEGUI INSERIR OS ICONES COM O ::BEFORE UTILIZANDO O CONTENT: URL('........')

 

Desde já agradeço pelo interesse em me ajudar. Valeu mesmo!

Share this post


Link to post
Share on other sites

Bom o posicionamento dos itens na tela eu consegui fazer de maneira satisfatória, agora, e ainda no CSS, estou com problemas em exibir os ícones com os comandos como: before, after e content. Tentei até o content: url('...........').

 

O resultado atual pode ser visto clicando aqui. (SEMPRE EM MODO MOBILE)

 

Arquivo HTML atual:

<form id="search-form" style="width: 95%; display: block;">
		<div class="linkNavForm" style="display: flex; flex-direction: column; flex-wrap: wrap; align-items: center;">
            <button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
			<a data-id="show" href="#" style="color: #f26122;">Busca Avançada</a>
		</div>		
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Quartos</label>
					<select class="quantidade_quartos" id="quantidade_quartos">
						<option value="0">Quartos</option>
						<option value="1-quarto">1 quarto</option>
						<option value="2-quartos">2 quartos</option>
						<option value="3-quartos">3 quartos</option>
						<option value="4-quartos">4 quartos</option>
						<option value="5-quartos">5+ quartos</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Vagas</label>
					<select class="quantidade_vagas" id="quantidade_vagas">
						<option value="0">Vagas</option>
						<option value="1-vaga">1 vaga</option>
						<option value="2-vagas">2 vagas</option>
						<option value="3-vagas">3 vagas</option>
						<option value="4-vagas">4 vagas</option>
						<option value="5-vagas">5+ vagas</option>
					</select>
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Estado</label>
					<select name="uf" id="uf" class="uf">
						<option value="">Todos os estados</option>
						<option value="AC">Acre</option>
						<option value="AL">Alagoas</option>
						<option value="AM">Amazonas</option>
						<option value="AP">Amapá</option>
						<option value="BA">Bahia</option>
						<option value="CE">Ceará</option>
						<option value="DF">Distrito Federal</option>
						<option value="ES">Espírito Santo</option>
						<option value="GO">Goiás</option>
						<option value="MA">Maranhão</option>
						<option value="MG">Minas Gerais</option>
						<option value="MS">Mato Grosso do Sul</option>
						<option value="MT">Mato Grosso</option>
						<option value="PA">Pará</option>
						<option value="PB">Paraíba</option>
						<option value="PE">Pernambuco</option>
						<option value="PI">Piauí</option>
						<option value="PR">Paraná</option>
						<option value="RJ">Rio de Janeiro</option>
						<option value="RN">Rio Grande do Norte</option>
						<option value="RO">Rondônia</option>
						<option value="RR">Roraima</option>
						<option value="RS">Rio Grande do Sul</option>
						<option value="SC">Santa Catarina</option>
						<option value="SE">Sergipe</option>
						<option value="SP">São Paulo</option>
						<option value="TO">Tocantins</option>
					</select>	
				</div> 
			</section>  
		</div>			
		<div class="rowForm">	
			<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
				<div class="select select-large field-search select-transacao">                               
					<label>Cidade</label>
					<select class="city" id="city">
						<option value="">Todas as cidades</option>
						<?php
							while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {
								
								if ($_REQUEST['city_id'] == $row['id']) {
									echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
								} 
								else {
									echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
								}
							}
						*/?>
					</select>
				</div>>
			</section>-->

        <ul class="filtros_principais">

            <li>

                <label id="lb_faixa_preco" class="icon_faixa_preco">FAIXA DE PREÇO?
                    <span>&blacktriangledown;</span>
                </label>
                <div id="dfaixa_preco" data-filtro="slider" style="display: none;">
                    <span>Faixa de preço R$</span>
                    <div id="box_slide_preco">
                        <ul>
                            <li>
                                <input type="text" id="typeprecomin" value="0" maxlength="11"/>
                            </li>

                            <li>
                                <span>até</span>
                                <span></span>
                            </li>

                            <li>
                                <input type="text" id="typeprecomax" maxlength="11">
                            </li>

                        </ul>

                        <div id="slide_busca_preco">
                            <div>
                                <div>

                                    <div>

                                    </div>

                                </div>

                                <div>

                                    <div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <span>ou</span>
                        <span id="sbuscaporparcela">Buscar por parcela</span>

                    </div>
                </div>

                <div id="dbusca_por_parcela" style="display: none;">

                    <span class="titulo">Buscar por parcela</span>

                    <div>

                        <div>
                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                    </div>

                    <input type="hidden" id="hd_modulo_novo" value="false">

                </div>

            </li>

            <li>

                <label id="lbquarto">QUARTOS
                <span>&blacktriangledown;</span>
                </label>

                <div id="dquarto" style="display: none;">

                    <span class="titulos">quartos</span>

                    <ul>

                        <li>

                            <input type="checkbox" id="quarto1" value="1">
                            <label for="quarto1">1</label>

                        </li><li>

                            <input type="checkbox" id="quarto2" value="2">
                            <label for="quarto2">2</label>

                        </li><li>

                            <input type="checkbox" id="quarto3" value="3">
                            <label for="quarto3">3</label>

                        </li>

                        <li>

                            <input type="checkbox" id="quarto4" value="4">
                            <label for="quarto4">4 ou mais</label>

                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbsuite">SUÍTES
                <span>&blacktriangledown;</span>
                </label>

                <div id="dsuite" style="display: none;">

                    <span class="titulo">Suítes</span>

                    <ul>

                        <li>
                            <input type="checkbox" id="suite1">
                            <label for="suite1">1</label>
                        </li><li>
                            <input type="checkbox" id="suite2">
                            <label for="suite2">2</label>
                        </li><li>
                            <input type="checkbox" id="suite3">
                            <label for="suite3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="suite4">
                            <label for="suite4">4 ou mais</label>
                        </li>

                    </ul>
                </div>
            </li>

            <li>
                <label id="lbvaga">Vagas
                    <span>&blacktriangledown;</span>
                </label>
                
                <div id="dvaga" style="display: none;">
                    
                    <span class="titulo">Vagas</span>
                    
                    <ul>
                        
                        <li>
                            <input type="checkbox" id="vaga1" value="1">
                            <label for="vaga1">1</label>
                        </li><li>
                            <input type="checkbox" id="vaga2" value="2">
                            <label for="vaga2">2</label>
                        </li><li>
                            <input type="checkbox" id="vaga3" value="3">
                            <label for="vaga3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="vaga4" value="4">
                            <label for="vaga4">4</label>
                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbfaixaarea">Área (m²)
                    <span>&blacktriangledown;</span>
                </label>

                <div id="dfaixaarea" style="display: none;">
                    <span class="titulo">Área (m²)</span>

                    <div id="box_busca">

                        <ul>

                            <li>
                                <input type="text" id="typearea_min_avan" maxlength="6" pattern="\d*">
                            </li>

                            <li class="spacer-slider">
                                <span class="spacer-left"></span>
                                até
                                <span class="spacer-right"></span>
                            </li>

                            <li>
                                <input type="text" id="typearea_max_avan" maxlength="6" pattern="\d*">
                            </li>

                        </ul>

                        <div id="slider_busca_min_area">

                            <div>

                                <div style="left: 0%;">

                                    <div>

                                    </div>

                                </div>

                                <div style="left: 100%;">

                                    <div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </li>

        </ul>

        <div id="filtros_secundarios">

            <label>O que você busca em um imóvel?</label>
            <div id="dpalavra_chave">
                <input id="palavra_chave" type="text" placeholder="Ex: rua, piscina, churrasqueira..." autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_pchave" class="formata_btn">+</button>

                <div id="tipo_anuncio">

                   <label class="tp_anuncio_label">Exibir apenas anúncios:</label>

                    <ul style="list-style: none;">

                        <li style="white-space: nowrap; width: auto;">
                        <input type="checkbox" id="chkbusca_avan_end" name="chkbusca_avan_e01" class="formata_checkbox">
                        <label for="chkbusca_avan_end" class="tp_anuncio_label" style="margin-left: 5px;">Com endereço</label>
                        </li>

                    <li style="white-space: nowrap; width: auto;">

                        <input type="checkbox" id="chkbusca_avan_distrato" name="chkbusca_avan_d01" class="formata_checkbox">
                        <label for="chkbusca_avan_distrato" class="tp_anuncio_label" style="margin-left: 5px;">Oportunidades | Revendas</label>

                    </li>

                   </ul>
                </div>

                <label>Código do imóvel</label>
            <div id="dcodigo_imovel">
                <input id="codigo_imovel" type="text" placeholder="Digite o código (ex: IM00000)" autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_codigo" class="formata_btn">OK</button>

            </div>

        </div>

		</div>			
		<div class="rowForm">	
			<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
		</div>
	</form>

Arquivo atual CSS:

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#palavra_chave{
		width: calc(100% - 61px);
	}

	#codigo_imovel{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		margin-top: 15px;
	}

	.tp_anuncio_label{
		white-space: nowrap;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px;
	}

	.formata_checkbox{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0px;
		background-color: #ffffff;
		border: 2px solid #dddddd;
		box-sizing: border-box;
	}

 

Share this post


Link to post
Share on other sites

Se for esses icones:

rPINysVQTSOITiNqfcLPUg.png

Adicione no topo do seu site entre as tags <head> isso:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

e no css coloque assim:

.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}

 

Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

 

Lembre-se de usar sempre a \ antes do código.

 

Desculpe a demora, para responder.

 

Abraços

Share this post


Link to post
Share on other sites
Em 27/10/2017 at 02:20, Aphrodi disse:

Se for esses icones:

rPINysVQTSOITiNqfcLPUg.png

Adicione no topo do seu site entre as tags <head> isso:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

e no css coloque assim:


.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}

 

Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

 

Lembre-se de usar sempre a \ antes do código.

 

Desculpe a demora, para responder.

 

Abraços

Então Aphrodi, estou eu de volta após tanto tempo rs. Depois de muitas lutas e contratempos, estou com todo estilo visual do site, pronto, de acordo com que ele quis. Fiz o me indicou sem problemas, mas como eu já havia preparado uma estrutura para trabalhar com <img/>, segui com a mesma, porém, adquiri conhecimento com o que me indicou. No momento porém, estou com dificuldades nos botões, pois o meu cliente o quer azul ao acessar o site ou a cada seleção, isso no desktop, fiz muito bem de diversas maneiras, porém no celular, de modo algum funcionou. Segue o código HTML e JavaScript.

 

HTML

<div id="procura_cliente">
                    <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Comprar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Alugar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Lançamentos</button>
                    
</div>

Javascript

function changeBgColor(element) {
    if(element.className === 'btn_clicado') {
        element.className = 'btn_desclicado';
    } else {
        element.className = 'btn_clicado';
    }
}

Estou pensando também, como fazer com que apareça uma opção ao selecionarmos a opção preço e outras, aonde nela escolhemos valores e etc por meio de uma barra de rolagem. Desde já agradeço, e um forte abraço! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

    • By pheureunanda
      Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 
      Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 
       
      E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 
       
      Se alguém puder me ajudar... Estou recorrendo a esse fórum. 
    • By julianaparra
      Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.
      Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 
       
      Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/
       
      HTML
      <!DOCTYPE html> <html lang="pt-BR">   <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">     <link rel="stylesheet" href="./css/main.css">     <title>Juliana Parra</title> </head>   <body>     <header class="menu-principal">         <main>             <div class="header-1">                 <div class="logo">                     <a href="index.html">                         <img src="./img/logo.png" />                     </a>                 </div>                 <div class="links">                     <div class="menu">                         <nav>                             <ul>                                 <li><a href="index.html">Início</a></li>                                 <li><a href="sobre.html">Sobre</a></li>                                 <li><a href="portifolio.html">Portifolio</a></li>                                 <li><a href="contato.html">contato</a></li>                             </ul>                         </nav>                     </div>                     <ul class="redes-sociais">                         <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"                                     alt="Meu github"></a></li>                         <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img                                     src="./img/linkedin.png" alt="Meu linkedIn"></a></li>                     </ul>                 </div>             </div>         </main>     </header>     <div class="header-2">         <div class="imagem-fundo"></div>         <div class="container"></div>           <div class="imagem-miolo">             <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">         </div>     </div>     <div>         <div class="texto">             <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>                 Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,                 excepturi tempore nemo porro vel sequi ea quisquam velit sunt?                 Recusandae quidem aperiam tenetur.</p>             <div class="botao">                 <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>             </div>         </div>     </div>     <footer>         <div class="rodape">             <main>                 <div class="direitos-reservados">                     2019 Todos os Direitos Reservados                 </div>             </main>         </div>     </footer> </body>   </html>     //CSS   body {     font-family: 'Open Sans', sans-serif;        width: 100%;     height: 100%;     margin: 0 auto;        } .menu-principal {     background-color: #252323;     height: 68px;     width: 100%;             } main {     margin: 0 auto;     width: 980px;         position: relative; } .logo {     float: left;     padding: 10px;     width: 30%; } .links ul li {     margin-left: 20px;     display: inline-block;     float: left;     list-style: none; } .links{     padding: 10px;     width: 65%;     float: left; } .menu ul li a {     padding: 10px;     color: #8b8b8b;     text-decoration: none;     font-size: 16px;     text-transform: uppercase; } .menu ul li a:hover{     color: #00bac6; } .slick-initialized {     overflow: hidden; } .imagem-fundo {     background-image: url(/img/imagem_home.png);     width: 100%;       height: 400px;      background-repeat: no-repeat;        } .container {        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */ background: #00aa9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00aa9b 8%, #2989d8 45%, #207cca 52%, #00ba3a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */     display: block;     width: 100%;       height: 30px; }   .imagem-bolinhas{     width: 1080px;     position: relative;       left: 250px;         top: 20px;              height: 300px;           background-repeat: no-repeat;       size: cover;   } .texto {     text-align: center;         width: 600px;     height: 300px;      font-size: 25px;       padding: 20px;        position:relative;     top:20%;     left:30%;      }   .bt {          text-decoration:none;            font-size: 15px;         color:white;         padding: 10px 20px;         background: -moz-linear-gradient(             top,             #0083ab 0%,             #00ba3b);         background: -webkit-gradient(             linear, left top, left bottom,             from(#0083ab),             to(#00ba3b));                 border-radius: 10px;         border: 1px solid;         -moz-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         -webkit-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);     }   .rodape {     color: #c1c1c1;     background-color: #252323;     height: 60px;     width: 100%;       } .direitos-reservados {     padding: 20px;     width: 60%;     float: right;     }
    • By lucas9
      Com base nos conceitos de reutilização de código e flexibilidade, você deve planejar uma classe de faturamento com o método faturar. Lembre-se que não é permitido reescrever métodos; no entanto, deve ser considerado que cada perfil de cliente tem uma regra de faturamento diferente. Veja:
      Cliente pessoa física recebe um desconto de 15% e tem 30 dias para pagar. Cliente pessoa jurídica recebe um desconto de 20% e tem 60 dias para pagar. Cliente governo não recebe desconto e deve pagar à vista. Use os comandos try e catch para tratar as possíveis exceções (por exemplo, tentar ler mais clientes do que existem).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.