rizzo-next
Version:
The next generation of Lonely Planet's style guide and pattern library.
551 lines (496 loc) • 28.9 kB
HTML
<div hidden>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="lp-icon-cross" viewBox="0 0 32 32">
<title>cross</title>
<path d="M32 1.9l-1.9-1.9-14.1 14.1-14.1-14.1-1.9 1.9 14.1 14.1-14.1 14.1 1.9 1.9 14.1-14.1 14.1 14.1 1.9-1.9-14.1-14.1z"></path>
</symbol>
<symbol id="lp-icon-hamburger" viewBox="0 0 32 32">
<title>hamburger</title>
<path d="M0 6h32v2.6h-32v-2.6z"></path>
<path d="M0 14.7h32v2.6h-32v-2.6z"></path>
<path d="M0 23.4h32v2.6h-32v-2.6z"></path>
</symbol>
<symbol id="lp-icon-logo" viewBox="0 0 65 32">
<title>logo</title>
<path d="M17.473 19.657c-1.195-0.258-1.987-0.937-2.52-2.116v2.261h-2.245v-4.264c-0.129-0.937-1.454-0.937-1.583 0v4.248h-2.245v-2.39c-0.533 1.454-1.583 2.116-3.182 2.261-1.583 0-2.649-0.791-3.311-2.116v2.261h-2.375v-9.95h2.374v4.91c0.533-1.066 1.195-1.599 2.245-1.987 1.858-0.404 3.44 0.404 4.232 2.116 0.533-1.454 1.583-2.261 3.182-2.261 1.454 0.129 2.52 0.791 2.907 2.261 0.404-1.066 1.324-1.858 2.649-2.116 1.858-0.258 3.182 0.533 3.973 2.116v-5.040h2.374v2.794h2.245v4.345c0 0.791 1.195 0.791 1.195 0v-4.377h2.245v7.575c0 0.791-0.258 1.324-0.791 1.987-0.662 0.662-1.324 0.791-2.245 0.937-1.195 0.129-1.987-0.258-2.907-0.937l1.324-1.728c0.662 0.533 1.712 0.533 2.116-0.258 0.129-0.258 0.129-0.662 0.129-1.066-1.195 1.195-3.037 0.662-3.44-0.937v1.599h-2.374v-3.053h-4.636c0.258 1.066 1.454 1.454 2.374 0.662l1.987 0.258c0.016 0.533-1.050 2.261-3.699 2.003zM6.893 16.201c0-0.791-0.662-1.454-1.454-1.454s-1.454 0.662-1.454 1.454 0.662 1.454 1.454 1.454c0.921 0 1.583-0.662 1.454-1.454zM16.681 15.797h2.907c-0.388-1.454-2.374-1.454-2.907 0z"></path>
<path d="M64.572 18.995c0 0.404-1.712 1.066-2.778 0.404s-1.050-1.599-1.050-2.665h-4.765c0.533 1.324 2.116 1.195 2.649 0.533l1.987 0.404c-0.662 2.261-2.649 2.649-4.49 1.987-1.066-0.533-1.583-1.066-1.987-1.987v2.261h-2.245c0-1.454 0-2.924 0-4.377-0.129-0.937-1.583-0.937-1.583 0v4.232h-3.828v-1.324c0-0.533-0.533 1.324-1.324 1.324-1.583 0.129-2.907-0.662-3.57-2.116v2.116h-2.374v-2.132c-0.662 1.454-2.374 2.261-4.103 1.858l-0.258-0.129c0 0 0.129 2.39 0.129 3.053h-2.374v-6.235c0-2.924 3.182-4.652 5.556-2.924 0.404 0.404 0.791 0.937 1.066 1.454v-4.91h2.374v4.91c0.791-1.454 2.245-2.261 3.973-1.987 1.195 0.258 1.987 0.937 2.52 2.116 0.662-1.858 2.374-2.649 4.361-1.987 0.921 0.404 1.324 1.066 1.712 1.987 0.791-1.858 2.649-2.649 4.636-1.987 0.921 0.533 1.583 1.066 1.987 1.987v-3.715h2.245v1.454h1.454v2.116h-1.454c0 0.791-0.129 1.454 0.129 2.116 0.129 0.404 0.791 0.533 1.324 0.129v0l0.081 2.035zM37.582 16.201c0-0.791-0.662-1.454-1.454-1.454s-1.454 0.662-1.454 1.454 0.662 1.454 1.454 1.454 1.454-0.662 1.454-1.454zM46.191 16.201c0-0.791-0.662-1.454-1.454-1.454v0c-0.791 0-1.454 0.662-1.454 1.454s0.662 1.454 1.454 1.454c0.791 0 1.454-0.662 1.454-1.454zM58.757 15.668c-0.404-1.454-2.374-1.324-2.778 0h2.778z"></path>
<path d="M18.797 11.42l-1.583-0.662c2.245-6.235 8.076-10.757 14.957-10.757s12.696 4.506 14.812 10.757l-1.583 0.517c-1.858-5.572-7.139-9.417-13.229-9.417s-11.387 3.99-13.374 9.562z"></path>
<path d="M45.383 20.852l1.583 0.662c-2.116 6.105-7.931 10.612-14.812 10.483-6.881 0-12.696-4.377-14.812-10.483l1.583-0.517c1.858 5.443 7.139 9.287 13.229 9.287s11.387-3.86 13.229-9.433z"></path>
</symbol>
<symbol id="lp-icon-search" viewBox="0 0 32 32">
<title>search</title>
<path d="M32 30.2l-8.4-8.4c2-2.4 3-5.3 3-8.4 0-7.4-6-13.4-13.3-13.4s-13.3 6-13.3 13.3 6 13.3 13.3 13.3c3.1 0 6.1-1.1 8.4-3l8.4 8.4 1.9-1.8zM2.6 13.3c0-5.9 4.8-10.7 10.7-10.7s10.7 4.8 10.7 10.7c0 2.8-1.1 5.5-3 7.5-2 2.1-4.8 3.2-7.7 3.2-5.9 0-10.7-4.8-10.7-10.7z"></path>
</symbol>
</svg>
</div>
<header class="lp-global-header lp-global-header--narrow lp-global-header--no-images" role="banner">
<div class="lp-global-header__container">
<div class="lp-global-header__inner js-lp-global-header-inner">
<a class="lp-logo lp-logo--narrow" href="http://www.lonelyplanet.com">
<svg class="svg-icon svg-icon--fit" viewBox="0 0 142 72" aria-label="Lonely Planet">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-icon-logo"></use>
</svg>
</a>
<a class="lp-global-header__search js-lp-global-header-search" href="/search">
<svg class="svg-icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-icon-search"></use>
</svg>
<span class="lp-global-header__search-text">Search Lonely Planet</span>
<span class="lp-global-header__search-beyond">and beyond</span>
</a>
<div class="lp-global-header__navigation">
<nav class="navigation navigation--narrow navigation--no-images" role="navigation">
<ul class="navigation__list">
<li
class="js-nav-item navigation__item navigation__item--search js-lp-search "
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Search">
<a class="navigation__link" href="//www.lonelyplanet.com/search">
Search
</a>
</li>
<li
class="js-nav-item navigation__item "
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Video">
<a class="navigation__link" href="//www.lonelyplanet.com/video">
Video
</a>
<div class="sub-navigation">
<a class="sub-navigation-feature" href="//www.lonelyplanet.com/video/art-and-culture/v/cha/2">
<img
class="sub-navigation-feature__image"
src="https://lonelyplanetstatic.imgix.net/op-video-sync/assets/art_and_culture_masthead2.jpg?w=80&h=60&fit=min"
alt="Art and culture">
<div class="sub-navigation-feature__text">
<div class="sub-navigation-feature__title">
Art and culture
</div>
<div class="sub-navigation-feature__subtitle">
Featured
</div>
</div>
</a>
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/adventure-travel/v/cha/1">
Adventure travel
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/beaches/v/cha/3">
Beaches, coasts and islands
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/explore-every-day/v/cha/4">
Explore every day
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/food-and-drink/v/cha/7">
Food and drink
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/journeys/v/cha/9">
Journeys
</a>
</li>
</ul>
<a class="sub-navigation__button" href="//www.lonelyplanet.com/video">
Browse Videos
<i class="icon-chevron-right" aria-hidden="true"></i>
</a>
</div>
</li>
<li
class="js-nav-item navigation__item navigation__item--destinations "
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Destinations">
<a class="navigation__link" href="//www.lonelyplanet.com/places">
Destinations
</a>
<div class="sub-navigation">
<a class="sub-navigation-feature" href="//www.lonelyplanet.com/best-in-travel">
<img
class="sub-navigation-feature__image"
src="https://lonelyplanetstatic.imgix.net/marketing/2017/BIT/BIT-nav-image.png?w=80&h=60&fit=min"
alt="Best in Travel">
<div class="sub-navigation-feature__text">
<div class="sub-navigation-feature__title">
Best in Travel
</div>
<div class="sub-navigation-feature__subtitle">
Featured
</div>
</div>
</a>
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/africa">
Africa
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/antarctica-1007062">
Antarctica
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/asia">
Asia
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/pacific">
Australia & Pacific
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/caribbean">
Caribbean
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/central-america">
Central America
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/europe">
Europe
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/middle-east">
Middle East
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/north-america">
North America
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/south-america">
South America
</a>
</li>
</ul>
<a class="sub-navigation__button" href="//www.lonelyplanet.com/places">
See All Countries
<i class="icon-chevron-right" aria-hidden="true"></i>
</a>
</div>
</li>
<li
class="js-nav-item navigation__item "
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Bookings">
<a class="navigation__link" href="javascript:void(0)">
Bookings
</a>
<div class="sub-navigation">
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/travel-insurance">
Insurance
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/hotels">
Hotels
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/flights">
Flights
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/adventure-tours">
Adventure tours
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/sightseeing-tours">
Sightseeing tours
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/airport-transfers">
Airport transfers
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/car-rental">
Car rental
</a>
</li>
</ul>
</div>
</li>
<li
class="js-nav-item navigation__item navigation__item--shop js-cart-notification "
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Shop">
<a class="navigation__link" href="http://shop.lonelyplanet.com">
Shop
</a>
</li>
<li
class="js-nav-item navigation__item navigation__item--user navigation__item--user"
data-lpa-category="Destinations Next"
data-lpa-action="Global Navigation Click"
data-lpa-label="Sign In">
<a class="navigation__link" href="//auth.lonelyplanet.com/users/sign_in">
Sign In
</a>
</li>
</ul>
<nav class="mobile-navigation mobile-navigation--hidden">
<button class="mobile-navigation__close icon-close-small js-close">Close</button>
<header class="mobile-navigation__header js-mobile-navigation-header"></header>
<ul class="mobile-navigation__list">
<li
class="js-nav-item mobile-navigation__item mobile-navigation__item--search js-lp-search"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Search">
<a class="mobile-navigation__link" href="//www.lonelyplanet.com/search">
Search
</a>
</li>
<li
class="js-nav-item mobile-navigation__item mobile-"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Video">
<a class="mobile-navigation__link" href="//www.lonelyplanet.com/video">
Video
<i class="icon icon--chevron-down" aria-hidden="true"></i>
</a>
<div class="mobile-sub-navigation">
<a class="sub-navigation-feature" href="//www.lonelyplanet.com/video/art-and-culture/v/cha/2">
<img
class="sub-navigation-feature__image"
src="https://lonelyplanetstatic.imgix.net/op-video-sync/assets/art_and_culture_masthead2.jpg?w=80&h=60&fit=min"
alt="Art and culture">
<div class="sub-navigation-feature__text">
<div class="sub-navigation-feature__title">
Art and culture
</div>
<div class="sub-navigation-feature__subtitle">
Featured
</div>
</div>
</a>
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/adventure-travel/v/cha/1">
Adventure travel
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/beaches/v/cha/3">
Beaches, coasts and islands
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/explore-every-day/v/cha/4">
Explore every day
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/food-and-drink/v/cha/7">
Food and drink
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video/journeys/v/cha/9">
Journeys
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/video">
Browse Videos
</a>
</li>
</ul>
</div>
</li>
<li
class="js-nav-item mobile-navigation__item mobile-navigation__item--destinations"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Destinations">
<a class="mobile-navigation__link" href="//www.lonelyplanet.com/places">
Destinations
<i class="icon icon--chevron-down" aria-hidden="true"></i>
</a>
<div class="mobile-sub-navigation">
<a class="sub-navigation-feature" href="//www.lonelyplanet.com/best-in-travel">
<img
class="sub-navigation-feature__image"
src="https://lonelyplanetstatic.imgix.net/marketing/2017/BIT/BIT-nav-image.png?w=80&h=60&fit=min"
alt="Best in Travel">
<div class="sub-navigation-feature__text">
<div class="sub-navigation-feature__title">
Best in Travel
</div>
<div class="sub-navigation-feature__subtitle">
Featured
</div>
</div>
</a>
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/africa">
Africa
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/antarctica-1007062">
Antarctica
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/asia">
Asia
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/pacific">
Australia & Pacific
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/caribbean">
Caribbean
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/central-america">
Central America
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/europe">
Europe
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/middle-east">
Middle East
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/north-america">
North America
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/south-america">
South America
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="//www.lonelyplanet.com/places">
See All Countries
</a>
</li>
</ul>
</div>
</li>
<li
class="js-nav-item mobile-navigation__item mobile-"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Bookings">
<a class="mobile-navigation__link" href="javascript:void(0)">
Bookings
<i class="icon icon--chevron-down" aria-hidden="true"></i>
</a>
<div class="mobile-sub-navigation">
<ul class="sub-navigation__list">
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/travel-insurance">
Insurance
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/hotels">
Hotels
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/flights">
Flights
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/adventure-tours">
Adventure tours
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/sightseeing-tours">
Sightseeing tours
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/airport-transfers">
Airport transfers
</a>
</li>
<li class="sub-navigation__item">
<a class="sub-navigation__link" href="https://www.lonelyplanet.com/car-rental">
Car rental
</a>
</li>
</ul>
</div>
</li>
<li
class="js-nav-item mobile-navigation__item mobile-navigation__item--shop js-cart-notification"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Shop">
<a class="mobile-navigation__link" href="http://shop.lonelyplanet.com">
Shop
</a>
</li>
<li
class="js-nav-item mobile-navigation__item mobile-navigation__item--user"
data-lpa-category="Destinations Next"
data-lpa-action="Mobile Global Navigation Click"
data-lpa-label="Sign In">
<a class="mobile-navigation__link" href="//auth.lonelyplanet.com/users/sign_in">
Sign In
</a>
</li>
</ul>
</nav>
</nav>
</div>
<div class="lp-global-header__mobile lp-global-header__mobile--left">
<a class="lp-global-header__mobile-search js-lp-global-header-search" href="/search">
<svg class="svg-icon" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-icon-search"></use>
</svg>
</a>
</div>
<div class="lp-global-header__mobile lp-global-header__mobile--right js-lp-global-header-mobile">
<a class="lp-global-header__mobile-menu js-menu" href="#footer">
<span class="menu-icon" aria-label="Menu"></span>
</a>
</div>
</div>
</div>
</header>