Skip to content

Instantly share code, notes, and snippets.

@krvajal

krvajal/search.html

Created February 19, 2019 09:26
Show Gist options
  • Save krvajal/0958ddb0cfa8cb322d5a701d3b76ec70 to your computer and use it in GitHub Desktop.
Save krvajal/0958ddb0cfa8cb322d5a701d3b76ec70 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
search.html
---
layout: default
title: For Sale
section: for-sale
nofooter: true
---
{% include components.breadcrumb.html %}
<div class="c-properties">
<div class="c-properties__map">
<div class="c-properties__map-label">
<div class="checkbox checkbox--inline">
<label class="c-label"><input type="checkbox" checked disabled> Search as I move the map</label>
</div>
</div>
<div style="background: url('/img/png/map.png') 50%;width:100%;height:100%;"></div>
</div>
<div class="c-properties__list">
<div class="c-row c-row--alpha c-row--collapsed">
<div class="c-properties__filter u-hide-bp3-min">
<article class="panel-horizontal">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Location</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<input id="form-field-2" type="text" placeholder="Postal code or city" class="c-input-text c-input-text--sm" />
</div>
</div>
</article>
<article class="panel-horizontal">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Type</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<ul class="o-list">
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Apartment</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> House</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Land</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Office</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Retail</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Parking</label></li>
</ul>
</div>
</div>
</article>
<article class="panel-horizontal js-more-filters is-hidden">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Bedrooms</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<ul class="o-list">
<li class="radio radio--inline"><label class="c-label"><input type="radio" value="1" name="rooms"> 0</label></li>
<li class="radio radio--inline"><label class="c-label"><input type="radio" value="2" name="rooms" checked> 1</label></li>
<li class="radio radio--inline"><label class="c-label"><input type="radio" value="3" name="rooms"> 2</label></li>
<li class="radio radio--inline"><label class="c-label"><input type="radio" value="5" name="rooms"> More</label></li>
</ul>
</div>
</div>
</article>
<article class="panel-horizontal js-more-filters is-hidden">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Budget</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<div class="o-grid">
<div class="c-input-holder">
<div class="o-grid__item u-1-of-6">
<label class="c-label c-label--prefix c-label--sm" for="price-currency">Currency</label>
</div>
<div class="o-grid__item u-4-of-6 u-2-of-6-bp4">
<select type="number" class="c-input-text c-input-text--sm c-input-option" id="price-currency">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="ZDF">ZDF</option>
</select>
</div>
</div>
</div>
<div class="o-grid">
<div class="c-input-holder">
<div class="o-grid__item u-1-of-6">
<label class="c-label c-label--prefix c-label--sm" for="price-max">Max.</label>
</div>
<div class="o-grid__item u-4-of-6 u-2-of-6-bp4">
<input type="number" class="c-input-text c-input-text--sm c-input-text--prefix" id="price-max" />
</div>
<div class="o-grid__item u-1-of-6">
<span class="c-label c-label--postfix c-label--sm">EUR</span>
</div>
</div>
</div>
<div class="o-grid">
<div class="c-input-holder">
<div class="o-grid__item u-1-of-6">
<label class="c-label c-label--prefix c-label--sm" for="price-min">Min.</label>
</div>
<div class="o-grid__item u-4-of-6 u-2-of-6-bp4">
<input type="number" class="c-input-text c-input-text--sm c-input-text--prefix" id="price-min" value="0" />
</div>
<div class="o-grid__item u-1-of-6">
<span class="c-label c-label--postfix c-label--sm">EUR</span>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- <article class="panel-horizontal js-more-filters is-hidden">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Subtype</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<ul class="o-list">
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Townhouse</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Cottage</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Villa</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Mansion</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Farm</label></li>
</ul>
</div>
</div>
</article> -->
<article class="panel-horizontal js-more-filters is-hidden">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Condition</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<ul class="o-list">
<li class="radio radio--inline radio--poor">
<label class="c-label">
<input type="radio" value="poor" name="conditionradio"> Poor
</label>
</li>
<li class="radio radio--inline radio--fair">
<label class="c-label">
<input type="radio" value="fair" name="conditionradio"> Fair
</label>
</li>
<li class="radio radio--inline radio--good">
<label class="c-label">
<input type="radio" value="good" name="conditionradio" checked> Good
</label>
</li>
<li class="radio radio--inline radio--mint">
<label class="c-label">
<input type="radio" value="mint" name="conditionradio"> Mint
</label>
</li>
<li class="radio radio--inline radio--new">
<label class="c-label">
<input type="radio" value="new" name="conditionradio"> New
</label>
</li>
</ul>
</div>
</div>
</article>
<article class="panel-horizontal js-more-filters is-hidden">
<div class="o-grid o-grid__gutter">
<h2 class="panel-horizontal__title o-grid__item u-1-of-6-bp4">Extra wishes</h2>
<div class="panel-horizontal__body o-grid__item u-5-of-6-bp4">
<ul class="o-list">
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Garden</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Parking</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Furnished</label></li>
<li class="checkbox checkbox--inline"><label class="c-label"><input type="checkbox" checked> Terrace</label></li>
</ul>
</div>
</div>
</article>
<article class="panel-horizontal">
<div class="panel-horizontal__title u-text-center">
<a href="#" class="c-button--block js-show-hide" data-target-selector=".js-more-filters">
<span class="js-more-filters">
+ More
</span>
<span class="js-more-filters is-hidden">- Less</span>
</a>
</div>
</article>
</div>
</div>
<div class="c-row c-row--beta u-pb-alpha u-hide-bp3-min">
<a href="#" class="c-button c-button--alpha c-button--sm">Apply</a>
</div>
<div class="c-row c-row--beta u-pb-alpha u-hide-bp3">
<div class="u-hide-bp2">
<p class="toolbar u-mt-alpha u-mb-alpha">
<a href="#" class="c-button c-button--alpha c-button--md c-button--half" data-modal="#modalFilter" data-modal-title="Filter">
Edit Filters
</a>
<a href="#" class="c-button c-button--neutral c-button--md c-button--half" data-modal="#modalMap" data-modal-title="Map">
<span>View On Map</span>
</a>
</p>
</div>
<div class="u-hide-bp2-min">
<p class="toolbar u-mt-alpha u-mb-alpha">
<a href="#" class="c-button c-button--alpha c-button--md c-button--block" data-modal="#modalFilter" data-modal-title="Filter">
Edit Filters
</a>
</p>
</div>
</div>
<div class="c-row c-row--beta">
<div class="o-grid o-grid--gutter">
{% for x in (1..3) %}
{% for i in (1..6) %}
<div class="o-grid__item u-1-of-2-bp4">
{% include components.property.html %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<div class="c-row c-row--beta">
<div class="o-grid o-grid--gutter">
<div class="o-grid__item">
<nav class="u-text-center">
<!-- <p>
<a href="#" rel="next nofollow" title="Volgende" class="c-button c-button--neutral c-button--md">
Show More
</a>
</p> -->
<p>
<span class="pulse-loader">
<span class="innerring"></span>
<span class="innerdot"></span>
</span>
</p>
</nav>
</div>
</div>
</div>
{% include components.cta-alt.html %}
{% include components.footer-alt.html %}
</div>
</div>
{% include modals.filter.html %}
{% include modals.map.html %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment