uniplaces-uniq
Version:
Internal CSS Framework/Toolkit used @ Uniplaces
715 lines (667 loc) • 40.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UniQ</title>
<meta name="viewport" content="initial-scale=1, width=device-width">
<link rel="stylesheet" href="styles/demo.css"/>
</head>
<body>
<div class="banner">
<div class="banner__wrapper">
<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1.5" stroke="#434343" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<path d="M21 8c-1.753 0-3.226-1.135-3.767-2.703-.636.437-1.4.703-2.233.703-2.21 0-4-1.79-4-4 0-.11.023-.213.032-.32C5.62 2.615 1.5 7.32 1.5 13c0 6.352 5.148 11.5 11.5 11.5S24.5 19.352 24.5 13c0-2.028-.537-3.925-1.46-5.577C22.44 7.78 21.747 8 21 8z"></path>
<path d="M11 10c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zM17 15c0 .552-.447 1-1 1-.553 0-1-.448-1-1 0-.553.447-1 1-1 .553 0 1 .447 1 1zM12 18c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zM17.5 11c0 .276-.224.5-.5.5s-.5-.224-.5-.5.224-.5.5-.5.5.224.5.5zM5.5 14c0 .276-.224.5-.5.5s-.5-.224-.5-.5.224-.5.5-.5.5.224.5.5zM16.5 20c0 .276-.224.5-.5.5s-.5-.224-.5-.5.224-.5.5-.5.5.224.5.5z"></path>
</g>
</svg>
<div class="banner__message">
We rely on cookies to make your experience better. By using our website, you agree with our <a href="#">cookie
policy.</a>
</div>
<button class="banner__button">Got it!</button>
</div>
</div>
<header id="header" class="header">
<div class="header__wrapper">
<div class="header__mobile-cover"></div>
<ul class="header__mobile-nav">
<li class="header__mobile-nav__button">Home</li>
<li class="header__mobile-nav__separator"></li>
<li class="header__mobile-nav__button">List your place</li>
<li class="header__mobile-nav__button">Help</li>
<li class="header__mobile-nav__button">Sign up</li>
<li class="header__mobile-nav__button">Sign in</li>
<li class="header__mobile-nav__separator"></li>
<li class="header__mobile-nav__button header__mobile-nav__button--dropdown">En</li>
<li class="header__mobile-nav__dropdown">
<a href="">Deutsch</a>
<a href="">English</a>
<a href="">Español</a>
<a href="">Français</a>
<a href="">Italiano</a>
<a href="">Nederlands</a>
<a href="">Polski</a>
<a href="">Português</a>
<a href="">Mandarin</a>
</li>
</ul>
<div class="header__logo"></div>
<div class="header__breadcrumb">
<div class="header__breadcrumb__step">First step:</div>
<div class="header__breadcrumb__description">Describe your property</div>
</div>
<nav class="header__nav">
<button class="header__nav__button">Help</button>
<button class="header__nav__button">Login</button>
<button class="header__nav__button header__nav__button--bordered">Sign up</button>
<div id="userDropdown" class="header__nav__dropdown">
<button id="userToggleDropdown" class="header__nav__button header__nav__button--dropdown">Filipe
</button>
<ul class="header__nav__dropdown__list">
<li class="header__nav__dropdown__list__item">Account</li>
<li class="header__nav__dropdown__list__item">Billing</li>
<li class="header__nav__dropdown__list__item">Logout</li>
</ul>
</div>
<div id="dropdown" class="header__nav__dropdown">
<button id="toggleDropdown" class="header__nav__button header__nav__button--dropdown">EN</button>
<ul class="header__nav__dropdown__list">
<li class="header__nav__dropdown__list__item">Deutsch</li>
<li class="header__nav__dropdown__list__item">English</li>
<li class="header__nav__dropdown__list__item">Español</li>
<li class="header__nav__dropdown__list__item">Français</li>
<li class="header__nav__dropdown__list__item">Italiano</li>
<li class="header__nav__dropdown__list__item">Nederlands</li>
<li class="header__nav__dropdown__list__item">Polski</li>
<li class="header__nav__dropdown__list__item">Português</li>
<li class="header__nav__dropdown__list__item">中文</li>
</ul>
</div>
<button class="header__nav__button">Exit</button>
</nav>
<div class="header__mobile-button">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2 15.5v2h20v-2zm0-5v2h20v-2zm0-5v2h20v-2z"/><path d="m0 0h24v24h-24z" fill="none"/></svg>
</div>
</div>
</header>
<div class="tabs">
<div class="tabs__wrapper">
<div class="tabs__wrapper__item">Title</div>
<div class="tabs__wrapper__item">Beds</div>
<div class="tabs__wrapper__item">Amenities</div>
<div class="tabs__wrapper__item">Rules</div>
<div class="tabs__wrapper__item">Shortest stay</div>
<div class="tabs__wrapper__item">Bills</div>
<div class="tabs__wrapper__item">Rent price</div>
<div class="tabs__wrapper__item">Availability</div>
</div>
<div class="nav-tabs">
<div class="nav-tabs__wrapper">
<div class="nav-tabs__wrapper__item nav-tabs__wrapper__item--active">Tab1</div>
<div class="nav-tabs__wrapper__item">Tab2</div>
<div class="nav-tabs__wrapper__item">Tab3</div>
</div>
</div>
</div>
<!--
<div class="alert alert--success alert--fixed-top">
<div class="alert__wrapper">
{{inline-svg}}
<div class="alert__content">
Good morning! This is a generic alert message.
</div>
</div>
</div>
-->
<section id="main" class="main">
<div class="main__wrapper">
<div class="main__content">
<div class="subheader">How many wcs in the property?</div>
<div class="select-wrapper">
<select class="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="subheader">How many bedrooms in the property?</div>
<div class="input-container">
<input type="text" class="input input--range" placeholder="2 bedrooms">
<div class="input-button input-button--disabled">-</div>
<div class="input-button">+</div>
</div>
<div class="subheader">How many bathrooms in the property?</div>
<div class="input-container">
<input type="text" class="input input--range" placeholder="1 bedroom">
<div class="input-button input-button--disabled">-</div>
<div class="input-button">+</div>
</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--large button--primary">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--medium button--primary">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--primary">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--extra-small button--primary">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--large button--primary button--primary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--medium button--primary button--primary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--primary button--primary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--extra-small button--primary button--primary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--large button--secondary button--secondary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--medium button--secondary button--secondary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--secondary button--secondary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--extra-small button--secondary button--secondary--disabled">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--large button--alternative">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--medium button--alternative">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--alternative">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--extra-small button--alternative">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--full-width button--primary ">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--full-width button--secondary ">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--small button--full-width button--alternative ">Add living room</div>
<div class="subheader">Do you have a living room?</div>
<div class="button button--extra-small button--full-width button--alternative ">Add living room</div>
<div class="subheader">Which amenities does your property have?</div>
<div class="input-container input-container--bordered">
<input type="checkbox" id="elevator" class="checkbox checkbox--use-background" checked>
<label for="elevator">Elevator</label>
</div>
<div class="input-container input-container--bordered input-container--focused">
<input type="checkbox" id="wifi" class="checkbox checkbox--error">
<label for="wifi">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 10">
<path fill="#fff" d="M11.08.31L3.71 7.19l-2-2a1.12 1.12 0 0 0-1.47 0 1.12 1.12 0 0 0 0 1.47L3 9.39a1.06 1.06 0 0 0 .74.37 1.74 1.74 0 0 0 .74-.25l8.1-7.61a.92.92 0 0 0 0-1.47c-.52-.49-1.14-.61-1.5-.12z"/>
</svg>
WiFi
</label>
</div>
<div class="input-container input-container--bordered">
<input type="checkbox" id="cabletv" class="checkbox checkbox--disabled">
<label for="cabletv">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 10">
<path fill="#fff" d="M11.08.31L3.71 7.19l-2-2a1.12 1.12 0 0 0-1.47 0 1.12 1.12 0 0 0 0 1.47L3 9.39a1.06 1.06 0 0 0 .74.37 1.74 1.74 0 0 0 .74-.25l8.1-7.61a.92.92 0 0 0 0-1.47c-.52-.49-1.14-.61-1.5-.12z"/>
</svg>
Cable TV
</label>
</div>
<div class="subheader">Does the property have gas installation?</div>
<div class="input-container input-container--bordered">
<div class="radio-button">
<input type="radio" id="piped">
<label for="piped">Yes</label>
</div>
</div>
<div class="input-container input-container--bordered">
<div class="radio-button">
<input type="radio" id="electric">
<label for="electric">No, it's all electric</label>
</div>
</div>
<div class="subheader">Who is this property for?</div>
<div class="input-container">
<div class="toggle" aria-role="button">
<label class="toggle__label" for="students"></label>
<input type="checkbox" class="toggle__input" id="students" checked>
<div class="toggle__icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.2px" height="9.2px" viewBox="0 0 11.2 9.2" style="enable-background:new 0 0 11.2 9.2;" xml:space="preserve" fill="#FFFFFF">
<g><path class="st0" d="M3.5,8.7C3.2,8.7,3,8.6,2.8,8.4L0.7,6.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4l5.6-5.2c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L4.2,8.4C3.9,8.6,3.7,8.7,3.5,8.7z"/></g>
</svg>
<div class="toggle__button"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9.4px" height="9.6px" viewBox="0 0 9.4 9.6" style="enable-background:new 0 0 9.4 9.6;" xml:space="preserve" fill="#FFFFFF">
<path class="st0" d="M6.2,4.8l2.5-2.4c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L4.8,3.3L2.4,0.8C2,0.4,1.4,0.4,1,0.8c-0.4,0.4-0.4,1,0,1.4l2.4,2.5L0.9,7.2c-0.4,0.4-0.4,1,0,1.4C1,8.8,1.3,8.9,1.6,8.9c0.3,0,0.5-0.1,0.7-0.3l2.5-2.4l2.4,2.5C7.4,8.9,7.7,9,8,9c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L6.2,4.8z"/>
</svg>
</div>
</div>
<label>Students</label>
</div>
<div class="input-container">
<div class="toggle" aria-role="button">
<label class="toggle__label" for="full-time"></label>
<input type="checkbox" class="toggle__input" id="full-time">
<div class="toggle__icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.2px" height="9.2px" viewBox="0 0 11.2 9.2" style="enable-background:new 0 0 11.2 9.2;" xml:space="preserve" fill="#FFFFFF">
<g><path class="st0" d="M3.5,8.7C3.2,8.7,3,8.6,2.8,8.4L0.7,6.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4l5.6-5.2c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L4.2,8.4C3.9,8.6,3.7,8.7,3.5,8.7z"/></g>
</svg>
<div class="toggle__button"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9.4px" height="9.6px" viewBox="0 0 9.4 9.6" style="enable-background:new 0 0 9.4 9.6;" xml:space="preserve" fill="#FFFFFF">
<path class="st0" d="M6.2,4.8l2.5-2.4c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L4.8,3.3L2.4,0.8C2,0.4,1.4,0.4,1,0.8c-0.4,0.4-0.4,1,0,1.4l2.4,2.5L0.9,7.2c-0.4,0.4-0.4,1,0,1.4C1,8.8,1.3,8.9,1.6,8.9c0.3,0,0.5-0.1,0.7-0.3l2.5-2.4l2.4,2.5C7.4,8.9,7.7,9,8,9c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L6.2,4.8z"/>
</svg>
</div>
</div>
<label>Full-time workers</label>
</div>
<div class="subheader">Gender?</div>
<div class="input-container">
<div class="multi-selector multi-selector--static">
<div class="multi-selector__button">
<input type="radio" name="gender" value="male" id="male" checked>
<label for="male">
<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.414L.293 6.707c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0L5 8.586 13.293.293c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L5 11.414" fill-rule="evenodd"/>
</svg>
Male
</label>
</div>
<div class="multi-selector__button">
<input type="radio" name="gender" value="female" id="female">
<label for="female">
<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.414L.293 6.707c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0L5 8.586 13.293.293c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L5 11.414" fill-rule="evenodd"/>
</svg>
Female
</label>
</div>
</div>
</div>
<div class="input-container">
<div class="multi-selector">
<div class="multi-selector__button">
<input type="radio" name="options" value="male" id="male2" checked>
<label for="male2">
<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.414L.293 6.707c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0L5 8.586 13.293.293c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L5 11.414" fill-rule="evenodd"/>
</svg>
Male
</label>
</div>
<div class="multi-selector__button">
<input type="radio" name="options" value="female" id="female2">
<label for="female2">
<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.414L.293 6.707c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0L5 8.586 13.293.293c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L5 11.414" fill-rule="evenodd"/>
</svg>
Female
</label>
</div>
<div class="multi-selector__button multi-selector__button--error">
<input type="radio" name="options" value="unknown" id="unknown2" checked>
<label for="unknown2">
<svg width="15" height="12" viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.414L.293 6.707c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0L5 8.586 13.293.293c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L5 11.414" fill-rule="evenodd"/>
</svg>
Unknown
</label>
</div>
</div>
</div>
<div class="subheader">Do you have any questions?</div>
<a class="anchor" href="#">Contact us</a>
<div class="subheader">Do you have suggestions?</div>
<a class="anchor anchor--alternative" href="#">Email us</a>
<div class="subheader">Warning</div>
<div class="input-container">
<input type="text" placeholder="Search for city" value="Braga"
class="input input--bordered input--error">
<div class="information">
<div class="information__content information__content--error">
Unfortunately our service doesn’t currently support Braga.
</div>
</div>
</div>
<div class="subheader">City</div>
<div class="input-container">
<input type="text" value="Braga" class="input input--bordered">
</div>
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path d="M12.5 0A12.5 12.5 0 1 1 0 12.5 12.46 12.46 0 0 1 12.5 0zm0 23A10.45 10.45 0 1 0 2 12.5 10.43 10.43 0 0 0 12.5 23z"/>
<path d="M12.5 10.68a1 1 0 0 1 1 1V19a1 1 0 1 1-2 0v-7.3a1.2 1.2 0 0 1 1-1.02z"/>
<circle cx="12.5" cy="7.16" r="1.48"/>
</svg>
<div class="alert__wrapper">
<div class="alert__title">
Information
</div>
<div class="alert__content">
This is the default alert with the right structure.
</div>
</div>
</div>
<div class="alert alert--success">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<g>
<path d="M16.93 8.3l-6.82 6.36-1.81-1.82a1 1 0 0 0-1.36 0 1 1 0 0 0 0 1.36l2.5 2.5a1 1 0 0 0 .68.34 1.61 1.61 0 0 0 .68-.23l7.5-7a.85.85 0 0 0 0-1.36c-.46-.45-1.03-.61-1.37-.15z"/>
<path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.39 12.39 0 0 0 12.5 0zm0 23A10.45 10.45 0 1 1 23 12.5 10.36 10.36 0 0 1 12.5 23z"/>
</g>
</svg>
<div class="alert__wrapper">
<div class="alert__content">
This is an alert without title and with close.
</div>
</div>
<div class="alert__close"></div>
</div>
<div class="alert alert--warning">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<g>
<path d="M12.5 25A12.5 12.5 0 1 1 25 12.5 12.46 12.46 0 0 1 12.5 25zm0-23A10.45 10.45 0 1 0 23 12.5 10.43 10.43 0 0 0 12.5 2z"/>
<path d="M12.5 15.32a1 1 0 0 1-1-1V6a1 1 0 1 1 2 0v8.3a1.2 1.2 0 0 1-1 1.02z"/>
<circle cx="12.5" cy="18.84" r="1.48"/>
</g>
</svg>
<div class="alert__content">
This alert doesn't have title so it doesn't need the wrapper.
</div>
</div>
<div class="alert alert--error">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.46 12.46 0 0 0 12.5 0zM23 12.5a10.42 10.42 0 0 1-2.33 6.59L5.91 4.37A10.46 10.46 0 0 1 23 12.5zm-21 0a10.42 10.42 0 0 1 2.49-6.73l14.74 14.74A10.46 10.46 0 0 1 2 12.5z"/>
</svg>
<p>It works with just a paragraph, but with more the wrapper is needed.</p>
</div>
<div class="subheader">Describe your property</div>
<textarea name="" id="" rows="5" class="textarea"
placeholder="I.E: Two bedroom apartment with a balcony and great view in trendy Bairro Alto."></textarea>
<div class="textarea-counter">300 characters</div>
<div class="subheader">Add mobile number</div>
<div class="mobile-number">
<div class="mobile-number__select-wrapper">
<select>
<option value="pt">Portugal (+351)</option>
<option value="es">Spain (+34)</option>
<option value="en">United Kingdom (+44)</option>
<option value="it">Italy (+39)</option>
</select>
</div>
<input type="text" placeholder="Mobile number">
</div>
<div class="subheader">What is the rent price?</div>
<div class="subtitle">This is the price for Single Bedroom.</div>
<div class="input-price">
<input type="text" maxlength="4" placeholder="00" value="">
<div class="input-price__value"><span class="input-price__currency">€</span> / <span
class="input-price__interval">month</span></div>
</div>
<div class="subheader">Lorem ipsum dolor</div>
<div class="subtitle">Lorem ipsum dolor sit amet conseqteteur un gradiva.</div>
<div class="pill pill--success">success label</div>
<div class="pill pill--warning">warning label</div>
<div class="pill pill--error">error label</div>
<div class="pill pill--info">info label</div>
</div>
</div>
<div class="image-gallery image--gallery-empty">
<div class="image-gallery__title">Photos of the property</div>
<div class="image-gallery__wrapper">
<div class="image-gallery__wrapper__button image-gallery__wrapper__button--primary image-gallery__wrapper__button">
Upload Photos
</div>
<div class="image-gallery__wrapper__message">You can also drag and drop them</div>
</div>
</div>
<div class="image-gallery image-gallery--has-images">
<div class="image-gallery__title">Photos of the property</div>
<div class="image-gallery__wrapper">
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__remove"></div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Add a caption</div>
</div>
<div class="image-gallery__wrapper__add-more">
<span class="plus">+</span>
Add more photos
</div>
</div>
</div>
<div class="image-gallery image-gallery--select-images">
<div class="image-gallery__title">Photos of the property</div>
<div class="image-gallery__wrapper">
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__select image-gallery__wrapper__item__select--selected"></div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Bed</div>
</div>
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__select image-gallery__wrapper__item__select--selected"></div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Bedroom</div>
</div>
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__select"></div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Living room</div>
</div>
</div>
</div>
<div class="image-gallery image-gallery--select-images">
<div class="image-gallery__title">Photos of the property</div>
<div class="image-gallery__wrapper">
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__main image-gallery__wrapper__item__main--selected">Cover
photo
</div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Bed</div>
</div>
<div class="image-gallery__wrapper__item">
<div class="image-gallery__wrapper__item__select image-gallery__wrapper__item__main">Cover photo</div>
<div class="image-gallery__wrapper__item__image"
style="background-image: url(https://d16teuje7e44sv.cloudfront.net/property-photos/6839f55b6617e1a9bc6c3764c8d47f73efe5700268b5e395bf63fdf431a34f7d/small.jpg)"></div>
<div class="image-gallery__wrapper__item__caption">Bedroom</div>
</div>
</div>
</div>
<div class="subheader">Tooltips</div>
<div class="tooltip-container">
<div class="tooltip tooltip--active">
<div class="tooltip__icon">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.42 26.42">
<g>
<g>
<path style="fill: #667485"
d="M13.21,0A13.28,13.28,0,0,0,0,13.21,13.28,13.28,0,0,0,13.21,26.42,13.28,13.28,0,0,0,26.42,13.21,13.28,13.28,0,0,0,13.21,0Zm0,21.59a1.15,1.15,0,1,1,1.15-1.15A1.15,1.15,0,0,1,13.21,21.59Zm1.15-7.35v2.53a1.15,1.15,0,0,1-1.15,1.15,1.24,1.24,0,0,1-1.15-1.15V13.21a1.15,1.15,0,0,1,1.15-1.15,2.41,2.41,0,0,0,0-4.82A2.36,2.36,0,0,0,10.8,9.65,1.15,1.15,0,0,1,9.65,10.8,1.24,1.24,0,0,1,8.5,9.65a4.71,4.71,0,0,1,9.42,0A5.08,5.08,0,0,1,14.36,14.24Z"/>
</g>
</g>
</svg>
</div>
<div class="tooltip__text">
Tooltip text goes here! Like this, all pretty and stuff.
</div>
<div class="tooltip__text">
Tooltip text goes here! Like this, all pretty and stuff.
</div>
</div>
</div>
<div class="tooltip-container">
<div class="tooltip tooltip--alternative tooltip--active">
<div class="tooltip__text">
Tooltip text goes here! Like this, all pretty and stuff.
</div>
</div>
</div>
</section>
<footer id="footer" class="footer footer--overhangs">
<div class="footer__wrapper">
<button class="button button--link">Back</button>
<button class="button button--primary">Next</button>
</div>
</footer>
<!--
<div class="modal">
<div class="modal__wrapper">
<div class="modal__close-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.9 17.7"><path class="st0" d="M17.9 16.1l-7.5-7.3 7.4-7.4L16.4 0 8.9 7.4 1.4.1 0 1.6l7.5 7.3-7.4 7.4 1.4 1.4L9 10.2l7.5 7.4z"></path></svg>
</div>
<div class="modal__wrapper__image"></div>
<div class="modal__wrapper__title">Let’s create your first offer page</div>
<div class="modal__wrapper__message">This is your first offer page to get you started.
You can always add more offers later</div>
</div>
</div>
-->
<!--
<div class="modal">
<div class="modal__wrapper modal__wrapper--signup">
<div class="modal__close-button modal__close-button--light">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.9 17.7"><path class="st0" d="M17.9 16.1l-7.5-7.3 7.4-7.4L16.4 0 8.9 7.4 1.4.1 0 1.6l7.5 7.3-7.4 7.4 1.4 1.4L9 10.2l7.5 7.4z"></path></svg>
</div>
<div class="modal__content">
<div class="signup signup--with-email">
<div class="signup__title">Sign up</div>
<form action="" class="signup__step1">
<button class="signup__button signup__button--facebook">
xml version="1.0" encoding="utf-8"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.3 23" style="enable-background:new 0 0 12.3 23;" xml:space="preserve">
<g><path d="M12.3,7H8V5.1C8,4.2,8.6,4,9,4c0.4,0,3,0,3,0V0L7.7,0C3.7,0,3,2.9,3,4.8V7H0v4h3c0,5.2,0,12,0,12h5c0,0,0-6.9,0-12h3.9
L12.3,7z"/></g>
</svg>
Continue with facebook<br>
<span class="signup__button--facebook__small">
we won't post anything without asking
</span>
</button>
<button class="signup__button signup__button--google">
xml version="1.0" encoding="utf-8"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4285F4;}
.st1{fill:#34A853;}
.st2{fill:#FBBC05;}
.st3{fill:#EA4335;}
.st4{fill:none;}
</style>
<path id="Shape" class="st0" d="M17.6,9.2c0-0.6-0.1-1.3-0.2-1.8H9v3.5h4.8C13.6,12,13,12.9,12,13.6v2.3H15
C16.7,14.3,17.6,11.9,17.6,9.2L17.6,9.2L17.6,9.2z"/>
<path id="Shape_1_" class="st1" d="M9,18c2.4,0,4.5-0.8,6-2.2L12,13.6c-0.8,0.5-1.8,0.9-3,0.9c-2.3,0-4.3-1.6-5-3.7H1V13
C2.4,16,5.5,18,9,18L9,18L9,18z"/>
<path id="Shape_2_" class="st2" d="M4,10.7C3.8,10.2,3.7,9.6,3.7,9S3.8,7.8,4,7.3V5H1C0.3,6.2,0,7.5,0,9s0.3,2.8,1,4L4,10.7L4,10.7
L4,10.7z"/>
<path id="Shape_3_" class="st3" d="M9,3.6c1.3,0,2.5,0.5,3.4,1.3L15,2.3C13.5,0.9,11.4,0,9,0C5.5,0,2.4,2,1,5l3,2.3
C4.7,5.2,6.7,3.6,9,3.6L9,3.6L9,3.6z"/>
<polygon id="Shape_4_" class="st4" points="0,0 18,0 18,18 0,18 "/>
</svg>
Continue with Google
</button>
<button class="signup__button signup__button--email">
xml version="1.0" encoding="utf-8"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 22 15" style="enable-background:new 0 0 22 15;" xml:space="preserve">
<g>
<path d="M21.7,1L11.3,9.4c-0.1,0.1-0.2,0.1-0.3,0.1s-0.2,0-0.3-0.1L0.3,1C0.1,1.3,0,1.6,0,2v11c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2
V2C22,1.6,21.9,1.3,21.7,1z"/>
<path d="M21,0.3C20.7,0.1,20.4,0,20,0H2C1.6,0,1.3,0.1,1,0.3l10,8.1L21,0.3z"/>
</g>
</svg>
Sign up with email
</button>
</form>
<form action="" class="signup__step2">
<input type="text" placeholder="First name">
<input type="text" placeholder="Last name">
<input type="email" placeholder="Email address">
<input type="password" placeholder="Password (min 5 characters)">
<button class="button button--primary">Signup</button>
</form>
<p class="signup__text">
By signing up, you agree with the Uniplaces’ <a href="">terms</a> and <a href="">conditions</a>.
</p>
<div class="signup__aux">Already have an account? <a href="">Log in here</a></div>
</div>
</div>
</div>
<div class="modal">
<div class="modal__wrapper modal__wrapper--login">
<div class="modal__close-button modal__close-button--light">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.9 17.7"><path class="st0" d="M17.9 16.1l-7.5-7.3 7.4-7.4L16.4 0 8.9 7.4 1.4.1 0 1.6l7.5 7.3-7.4 7.4 1.4 1.4L9 10.2l7.5 7.4z"></path></svg>
</div>
<div class="modal__content">
<div class="login">
<div class="login__title">Log in</div>
<form action="" class="login__step1">
<button class="login__button login__button--facebook">
xml version="1.0" encoding="utf-8"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.3 23" style="enable-background:new 0 0 12.3 23;" xml:space="preserve">
<g><path d="M12.3,7H8V5.1C8,4.2,8.6,4,9,4c0.4,0,3,0,3,0V0L7.7,0C3.7,0,3,2.9,3,4.8V7H0v4h3c0,5.2,0,12,0,12h5c0,0,0-6.9,0-12h3.9
L12.3,7z"/></g>
</svg>
Log in with facebook
</button>
<button class="login__button login__button--google">
xml version="1.0" encoding="utf-8"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4285F4;}
.st1{fill:#34A853;}
.st2{fill:#FBBC05;}
.st3{fill:#EA4335;}
.st4{fill:none;}
</style>
<path class="st0" d="M17.6,9.2c0-0.6-0.1-1.3-0.2-1.8H9v3.5h4.8C13.6,12,13,12.9,12,13.6v2.3H15
C16.7,14.3,17.6,11.9,17.6,9.2L17.6,9.2L17.6,9.2z"/>
<path class="st1" d="M9,18c2.4,0,4.5-0.8,6-2.2L12,13.6c-0.8,0.5-1.8,0.9-3,0.9c-2.3,0-4.3-1.6-5-3.7H1V13
C2.4,16,5.5,18,9,18L9,18L9,18z"/>
<path class="st2" d="M4,10.7C3.8,10.2,3.7,9.6,3.7,9S3.8,7.8,4,7.3V5H1C0.3,6.2,0,7.5,0,9s0.3,2.8,1,4L4,10.7L4,10.7
L4,10.7z"/>
<path class="st3" d="M9,3.6c1.3,0,2.5,0.5,3.4,1.3L15,2.3C13.5,0.9,11.4,0,9,0C5.5,0,2.4,2,1,5l3,2.3
C4.7,5.2,6.7,3.6,9,3.6L9,3.6L9,3.6z"/>
<polygon class="st4" points="0,0 18,0 18,18 0,18 "/>
</svg>
Log in with Google
</button>
<div class="login__divider">
<div class="login__divider__content">or</div>
</div>
<input type="text" placeholder="Email address">
<input type="password" placeholder="Password (min 5 characters)">
<button class="button button--primary">Log in</button>
<div class="login__alt-text">
<a href="">Forgot password?</a>
</div>
</form>
<div class="login__aux">Don't have an account? <a href="">Sign up here</a></div>
</div>
</div>
</div>
-->
<script src="http://zeptojs.com/zepto.min.js"></script>
<script>
(function () {
$('#toggle-menu').on('click', function () {
$(this).toggleClass('header__wrapper__mobile-buttons--active');
});
$('#userToggleDropdown').on('click', function () {
$('#userDropdown').toggleClass('header__nav__dropdown--active');
});
$('#toggleDropdown').on('click', function () {
$('#dropdown').toggleClass('header__nav__dropdown--active');
});
$('.mobile-number__country-code').on('click', function () {
$(this).toggleClass('mobile-number__country-code--active');
});
$('.header__mobile-button').on('click', function () {
$(this).toggleClass('header__mobile-button--active');
$('.header__mobile-nav').toggleClass('header__mobile-nav--active');
$('.header').toggleClass('header--active');
});
$('.tooltip').on('click', function () {
$(this).toggleClass('tooltip--active');
});
})();
</script>
</body>
</html>