diff --git a/__probe3.html b/__probe3.html new file mode 100644 index 0000000..5532abc --- /dev/null +++ b/__probe3.html @@ -0,0 +1,839 @@ + + + + + + + Hop On Hop Off — London Tour + + + + + + + + + + + + + + + + +
+ +
+ + + +
+
+ + +

Welcome to

+ +
+

London

+ +
+
+
+
+ + +
+
+
+
+

London Tour

+ +
+ + + 4.8/5 + + + + + London + + + + + from Mr. Bill + +
+
+ +
    +
  • + +
    + Duration + 1h 30m +
    +
    • +
  • + +
    + Max Travelers + 15 people +
    +
    • +
  • + +
    + Free Cancellation + Up to 24 hrs +
    +
    • +
  • + +
    + Category + Best Conversion +
    +
    • +
+ +
+

Overview

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit + amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem + ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

+
+ +
+

Gallery

+
+ A London street lined with period buildings + A red telephone box on a London street + A palm-lined avenue + Big Ben behind a red double-decker bus + Palm trees against the city skyline +
+
+ +
+
+

Whats included

+
    +
  • + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    +
    • +
  • + +

    ed do eiusmod tempor incididunt ut labore et dolo

    +
    • +
  • + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    +
    • +
  • + +

    ed do eiusmod tempor incididunt ut labore et dolo

    +
    • +
+
+ +
+

Whats Not included

+
    +
  • + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    +
    • +
  • + +

    ed do eiusmod tempor incididunt ut labore et dolo

    +
    • +
  • + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    +
    • +
+
+
+ +
+

Good to know

+
    +
  • + +

    Public transportation options are available nearby

    +
    • +
  • + +

    Infants are required to sit on an adult’s lap

    +
    • +
  • + +

    Not recommended for travelers with spinal injuries

    +
    • +
  • + +

    Not recommended for travelers with spinal injuries

    +
    • +
  • + +

    Public transportation options are available nearby

    +
    • +
  • + +

    Infants are required to sit on an adult’s lap

    +
    • +
+
+ +
+

Cancellation Policy

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

+
+
+ +
+ 100% Refund + 24 hours or more before the start time +
+
+
+ +
+ 0% Refund + Less than 24 hours before the start time +
+
+
+
+
+ + +
+
+
+ + + + + + + + + + diff --git a/assets/hero2.png b/assets/hero2.png new file mode 100644 index 0000000..8b870a7 Binary files /dev/null and b/assets/hero2.png differ diff --git a/assets/hero3.jpg b/assets/hero3.jpg new file mode 100644 index 0000000..0233fad Binary files /dev/null and b/assets/hero3.jpg differ diff --git a/assets/tower.png b/assets/tower.png new file mode 100644 index 0000000..07b815a Binary files /dev/null and b/assets/tower.png differ diff --git a/css/style.css b/css/style.css index 36592e7..b7fbb1a 100644 --- a/css/style.css +++ b/css/style.css @@ -7,6 +7,8 @@ --c-accent: #fc0; --c-teal: #2cafc2; --c-teal-05: rgba(44, 175, 194, 0.05); + --c-green: #34c759; + --c-red: #ff383c; --c-teal-20: rgba(44, 175, 194, 0.2); --c-ink: #101317; --c-muted: rgba(0, 0, 0, 0.5); @@ -2044,3 +2046,1051 @@ dd { scroll-behavior: auto; } } + +/* ========================================================= + Tour archive — hero filter bar + ========================================================= */ +.hero--archive { + min-height: clamp(30rem, 78svh, 48rem); +} + +/* "Explore Tours" is short enough to stay on one line at every size */ +.hero--archive .hero__title { + max-width: none; +} + +.filters { + order: 3; + width: 100%; + border-radius: var(--r-card); + background: var(--c-white); + box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.18); +} + +.filters__row { + display: flex; + align-items: center; + gap: var(--sp-3); + padding: var(--sp-3); +} + +.fsearch, +.fsel { + position: relative; + display: flex; + flex: 1 1 0; + align-items: center; + min-width: 0; + min-height: var(--control-h); + border-radius: var(--r-pill); + transition: border-color 0.2s var(--ease); +} + +/* the search field carries the longest placeholder, so it takes a little more room */ +.fsearch { + flex-grow: 1.3; + border: 1px solid var(--c-white); + background: rgba(0, 0, 0, 0.05); +} + +.fsel { + border: 1px solid var(--c-line); + background: var(--c-white); +} + +.fsel:hover { + border-color: rgba(0, 0, 0, 0.3); +} + +.fsearch__icon, +.fsel__icon { + position: absolute; + left: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.fsel__chevron { + position: absolute; + right: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.fsearch__input, +.fsel__input { + width: 100%; + min-width: 0; + min-height: var(--control-h); + padding: 0 calc(var(--sp-3) + 1.5rem); + border: 0; + border-radius: inherit; + font: inherit; + font-weight: 500; + color: var(--c-black); + background: transparent; + appearance: none; + -webkit-appearance: none; + text-overflow: ellipsis; +} + +.fsearch__input { + padding-inline: calc(var(--sp-3) + 1.375rem) var(--sp-2); + font-size: 0.875rem; +} + +.fsearch__input::placeholder { + color: var(--c-black); + opacity: 0.5; +} + +.fsearch__input::-webkit-search-cancel-button, +.fsearch__input::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* the sort dropdown carries its label outside the pill, so it needs no lead icon */ +.fsel--bare .fsel__input { + padding-left: var(--sp-3); +} + +.filters__apply { + flex: none; +} + +.filters__bar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3) var(--sp-4); + padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); + border-top: 1px solid var(--c-line); +} + +.filters__checks { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-2) 2.5rem; +} + +.check { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + cursor: pointer; +} + +.check__input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; +} + +.check__box { + display: grid; + flex: none; + place-items: center; + width: 1rem; + height: 1rem; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.25rem; + color: transparent; + background: var(--c-white); + transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease); +} + +.check:hover .check__box { + border-color: rgba(0, 0, 0, 0.45); +} + +.check__input:checked+.check__box { + color: var(--c-white); + border-color: var(--c-black); + background: var(--c-black); +} + +.check__input:focus-visible+.check__box { + outline: 2px solid var(--c-teal); + outline-offset: 2px; +} + +.check__text { + font-size: 1rem; + font-weight: 500; + opacity: 0.7; + transition: opacity 0.2s var(--ease); +} + +.check__input:checked~.check__text { + opacity: 1; +} + +.filters__sort { + display: flex; + align-items: center; + gap: var(--sp-2); +} + +.filters__sort-label { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + font-size: 1rem; + font-weight: 500; + white-space: nowrap; +} + +.filters__sort-label label { + cursor: pointer; +} + +.filters__sort .fsel { + flex: none; + width: 8.8125rem; +} + +/* ========================================================= + Tour archive — result grid + ========================================================= */ +/* the script shows and hides cards, pages and buttons with the hidden + attribute, which the flex and grid display values would otherwise win against */ +[hidden] { + display: none !important; +} + +.results { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-2) var(--sp-3); + margin-block-end: var(--sp-4); +} + +.results__count { + margin: 0; + font-size: 1rem; + font-weight: 500; + opacity: 0.7; +} + +.results__count b { + font-weight: 800; +} + +.results__reset { + flex: none; +} + +.tgrid__empty { + margin: 0; + padding-block: var(--sp-5); + font-size: 1.125rem; + font-weight: 500; + text-align: center; + opacity: 0.7; +} + +/* a button that reads as part of the sentence around it */ +.linkbtn { + padding: 0; + border: 0; + font: inherit; + color: var(--c-teal); + background: none; + text-decoration: underline; + cursor: pointer; +} + +.tgrid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 2.5rem var(--gap); + margin: 0; + padding: 0; + list-style: none; +} + +.titem { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--sp-3); +} + +/* landscape variant of the destination card used on the homepage rail */ +.dcard--wide { + width: 100%; + aspect-ratio: 416 / 251; +} + +/* the wider card gives the title and the key/value pairs more room to breathe */ +.dcard--wide .dcard__body { + gap: var(--sp-3); +} + +.dcard--wide .dcard__meta { + gap: var(--sp-4); +} + +.titem__desc { + width: 88.5%; + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.5; + text-align: justify; + opacity: 0.7; + transition: color 0.25s var(--ease), opacity 0.25s var(--ease); +} + +.titem.is-active .titem__desc, +.titem:hover .titem__desc, +.titem:focus-within .titem__desc { + color: var(--c-teal); + opacity: 1; +} + +/* hovering any card in the grid hands the highlight over to it */ +.tgrid:hover .titem.is-active:not(:hover):not(:focus-within) .titem__desc, +.tgrid:focus-within .titem.is-active:not(:hover):not(:focus-within) .titem__desc { + color: inherit; + opacity: 0.7; +} + +.tgrid:hover .dcard.is-active:not(:hover):not(:focus-within), +.tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.tgrid:hover .dcard.is-active:not(:hover):not(:focus-within)::after, +.tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within)::after { + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%); +} + +.tgrid:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot { + color: var(--c-white); + background: var(--c-glass); +} + +/* ========================================================= + Tour archive — pagination + ========================================================= */ +.pager { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: var(--sp-1); + margin-block-start: var(--sp-6); +} + +.pager__pages { + display: flex; + align-items: center; + gap: var(--sp-1); +} + +.pager__num, +.pager__btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--sp-1); + min-height: var(--control-h); + padding: 0 var(--sp-3); + border: 0; + border-radius: var(--r-pill); + font: inherit; + font-weight: 500; + color: var(--c-black); + background: transparent; + cursor: pointer; + transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease); +} + +.pager__num { + min-width: var(--control-h); + padding: 0 var(--sp-1); +} + +.pager__num:hover { + background: rgba(0, 0, 0, 0.05); +} + +.pager__num.is-current { + color: var(--c-white); + background: var(--c-black); +} + +.pager__btn { + border: 1px solid var(--c-line); + background: var(--c-white); +} + +.pager__btn--icon { + min-width: 4.5rem; +} + +.pager__btn:hover:not([disabled]) { + border-color: var(--c-black); +} + +.pager__btn[disabled] { + opacity: 0.4; + cursor: not-allowed; +} + +.pager__gap { + padding-inline: 0.25rem; + font-weight: 500; + opacity: 0.5; +} + +/* ========================================================= + Tour archive — responsive + ========================================================= */ +@media (max-width: 68.75rem) { + .filters__row { + flex-wrap: wrap; + } + + .fsearch, + .fsel { + flex: 1 1 12rem; + } + + .filters__apply { + flex: 1 1 100%; + } + + .tgrid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 48rem) { + .filters__bar { + justify-content: flex-start; + } + + .filters__checks { + gap: var(--sp-2) var(--sp-5); + } +} + +@media (max-width: 40rem) { + .filters__row { + gap: var(--sp-2); + padding: var(--sp-2); + } + + .fsearch, + .fsel { + flex: 1 1 100%; + } + + .filters__bar { + padding: var(--sp-3); + } + + .filters__sort { + width: 100%; + justify-content: space-between; + } + + .tgrid { + grid-template-columns: minmax(0, 1fr); + } + + .titem__desc { + width: 100%; + text-align: left; + } + + .pager__btn--icon { + min-width: 0; + } +} + +/* ========================================================= + Tour details — hero + ========================================================= */ +.hero-tour { + position: relative; + display: grid; + align-items: end; + /* one scale drives the display word, the kicker and the figure, so the three + keep the proportions they have in the design at every width */ + --word: clamp(3rem, 0.4rem + 9.5vw, 11.25rem); + min-height: clamp(26rem, 62svh, 38rem); + margin: var(--page-inset); + padding-block: calc(var(--header-h) + var(--sp-5)) clamp(0.75rem, 0.4rem + 1vw, 1.5rem); + border-radius: var(--r-xl); + isolation: isolate; + overflow: clip; +} + +/* the sky photo is framed on its upper third so the grass at its foot stays out + of shot, and the wash over it carries the blue into the brand turquoise */ +.hero-tour__photo { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + border-radius: inherit; + object-fit: cover; + object-position: center 26%; +} + +.hero-tour__sky { + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + background: + radial-gradient(70% 50% at 50% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%), + linear-gradient(180deg, rgba(27, 147, 166, 0.82) 0%, rgba(44, 175, 194, 0.62) 45%, rgba(111, 208, 221, 0.78) 100%); +} + +.hero-tour__inner { + display: flex; + flex-direction: column; + align-items: center; +} + +/* the block is exactly as wide as the display word, so it can sit centred in + the hero while the breadcrumb and the kicker line up on the word's left edge */ +.hero-tour__block { + display: flex; + position: absolute; + top: 112px; + flex-direction: column; + align-items: flex-start; + gap: var(--sp-2); + width: max-content; + max-width: 100%; +} + +.crumbs__list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; + font-size: 0.75rem; + font-weight: 500; +} + +.crumbs__list li+li::before { + content: "/"; + margin-inline-end: var(--sp-1); + opacity: 0.5; +} + +.crumbs__list a { + opacity: 0.5; + transition: opacity 0.2s var(--ease); +} + +.crumbs__list a:hover { + opacity: 1; +} + +.hero-tour__kicker { + margin: 0; + font-size: max(1.25rem, calc(var(--word) * 0.222)); + font-weight: 500; + letter-spacing: -0.01em; +} + +/* The figure overlaps the word, so the stage carries the display size and both + children are measured in em against it - the offsets are the Figma ones + (word at x487/y193 at 180px, figure at x756/y58, 263x447) expressed as ratios, + which keeps the composition identical at every width. */ +.hero-tour__stage { + position: relative; + align-self: stretch; + font-size: var(--word); + isolation: isolate; +} + +.hero-tour__word { + margin: 0; + font-size: 1em; + font-weight: 500; + line-height: 0.95; + letter-spacing: -0.02em; + color: var(--c-white); +} + +.hero-tour__figure { + position: absolute; + left: 2em; + top: -0.5em; + z-index: 1; + width: auto; + height: 2.48em; + object-fit: contain; + scale: 1.2; +} + +/* ========================================================= + Tour details — layout + ========================================================= */ +.tour__layout { + display: grid; + grid-template-columns: minmax(0, 1fr) 26rem; + align-items: start; + gap: clamp(1.5rem, 1rem + 1vw, 2rem); +} + +.tour__main { + display: flex; + flex-direction: column; + gap: var(--sp-5); + min-width: 0; +} + +.tour__block { + display: flex; + flex-direction: column; + gap: var(--sp-1); +} + +.tour__ct { + margin: 0; + font-size: 1rem; + font-weight: 700; +} + +.tour__text { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.6; + text-align: justify; + opacity: 0.7; +} + +.tour__text+.tour__text { + margin-block-start: var(--sp-3); +} + +/* --- title row --- */ +.tour-head { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3) var(--sp-4); +} + +.tour-head__title { + margin: 0; + font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); + font-weight: 500; + letter-spacing: -0.01em; +} + +.tmeta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-4); + font-size: 1rem; + font-weight: 500; +} + +.tmeta__item { + display: inline-flex; + align-items: center; + gap: var(--sp-1); +} + +.tmeta__item b { + font-weight: 500; +} + +.tmeta__item i { + font-size: 0.75rem; + font-style: normal; + opacity: 0.3; +} + +.tmeta__star { + color: var(--c-accent); +} + +.tmeta__icon { + opacity: 0.5; +} + +.tmeta__rule { + width: 1px; + height: 1.5rem; + background: var(--c-line); +} + +/* --- the four facts under the title --- */ +.facts { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; +} + +.fact, +.note { + display: flex; + align-items: center; + gap: var(--sp-2); + min-width: 0; + border-radius: var(--r-card); + background: var(--c-teal-05); +} + +.fact { + padding: var(--sp-4) var(--sp-3); +} + +.fact__icon, +.note__icon { + flex: none; + color: var(--c-teal); +} + +.fact__text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.fact__k { + font-size: 0.75rem; + font-weight: 500; + color: var(--c-teal); +} + +.fact__v { + font-size: 1rem; + font-weight: 500; +} + +/* --- gallery --- */ +.gallery { + display: grid; + grid-template-columns: 350fr 245fr 245fr; + gap: var(--sp-3); +} + +.gallery img { + width: 100%; + height: 100%; + aspect-ratio: 245 / 194; + border-radius: var(--r-xl); + object-fit: cover; +} + +.gallery__hero { + grid-row: span 2; + aspect-ratio: auto; + border-radius: var(--r-card); +} + +/* --- included / not included --- */ +.lists { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-4) clamp(1.5rem, 1rem + 1.5vw, 1.6875rem); +} + +.ilist { + display: flex; + flex-direction: column; + gap: var(--sp-3); +} + +.ilist__items { + display: flex; + flex-direction: column; + gap: var(--sp-3); + margin: 0; + padding: 0; + list-style: none; +} + +.ilist__items li { + display: flex; + align-items: center; + gap: var(--sp-3); +} + +.ilist__items p { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.5; + text-align: justify; + opacity: 0.7; +} + +.tick { + display: grid; + flex: none; + place-items: center; + width: 1.5rem; + height: 1.5rem; + border-radius: var(--r-pill); +} + +.tick--yes { + color: var(--c-green); + background: rgba(52, 199, 89, 0.1); +} + +.tick--no { + color: var(--c-red); + background: rgba(255, 56, 60, 0.1); +} + +/* --- good to know --- */ +.notes { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; +} + +.note { + gap: var(--sp-2); + padding: var(--sp-4) var(--sp-3); +} + +.note p { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.4; +} + +/* --- the tinted key/value cards, shared by the policy row and the sidebar --- */ +.statcard { + display: flex; + align-items: center; + gap: var(--sp-2); + padding: var(--sp-4); + border-radius: var(--r-card); +} + +.statcard__icon { + flex: none; +} + +.statcard__text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.statcard__k { + font-size: 0.75rem; + font-weight: 500; +} + +.statcard__v { + font-size: 1rem; + font-weight: 500; +} + +.statcard--yes { + background: rgba(52, 199, 89, 0.05); +} + +.statcard--yes .statcard__icon, +.statcard--yes .statcard__k { + color: var(--c-green); +} + +.statcard--no { + background: rgba(255, 56, 60, 0.05); +} + +.statcard--no .statcard__icon, +.statcard--no .statcard__k { + color: var(--c-red); +} + +.statcard--teal { + background: var(--c-teal-05); +} + +.statcard--teal .statcard__icon, +.statcard--teal .statcard__k { + color: var(--c-teal); +} + +.policy { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-3); + margin-block-start: var(--sp-3); +} + +/* ========================================================= + Tour details — booking sidebar + ========================================================= */ +.tour__aside { + position: sticky; + top: calc(var(--header-h) + var(--sp-3)); +} + +.bookcard { + display: flex; + flex-direction: column; + gap: var(--sp-1); + padding: var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); +} + +.bookcard__title { + display: flex; + align-items: center; + gap: var(--sp-1); + margin: 0 0 var(--sp-1); + padding: var(--sp-1) var(--sp-1) 0; + font-size: 1rem; + font-weight: 500; +} + +.bookcard__price { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3); + padding: var(--sp-3); + border: 1px dashed var(--c-line); + border-radius: var(--r-card); +} + +.price { + display: grid; + grid-template-areas: + "k k" + "v u"; + align-items: baseline; + gap: 0 var(--sp-1); + margin: 0; +} + +.price__k { + grid-area: k; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.3; +} + +.price__v { + grid-area: v; + font-size: 2rem; + font-weight: 500; + letter-spacing: -0.01em; +} + +.price__unit { + grid-area: u; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.3; +} + +.bookcard__cta { + flex: none; +} + +/* ========================================================= + Tour details — responsive + ========================================================= */ +@media (max-width: 68.75rem) { + .tour__layout { + grid-template-columns: minmax(0, 1fr); + } + + .tour__aside { + position: static; + order: -1; + } + + .facts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .notes { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 48rem) { + .gallery { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto; + aspect-ratio: auto; + } + + .gallery img { + aspect-ratio: 4 / 3; + } + + .gallery__hero { + grid-column: span 2; + grid-row: auto; + aspect-ratio: 16 / 9; + } + + .lists { + grid-template-columns: minmax(0, 1fr); + } +} + +@media (max-width: 40rem) { + .hero-tour { + min-height: clamp(24rem, 70svh, 34rem); + } + + .facts, + .notes { + grid-template-columns: minmax(0, 1fr); + } + + .policy { + grid-template-columns: minmax(0, 1fr); + } + + .tour__text, + .ilist__items p { + text-align: left; + } + + .bookcard__price { + justify-content: center; + } + + .bookcard__cta { + width: 100%; + } +} diff --git a/index.html b/index.html index 4a10dd5..ee51038 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,68 @@ stroke="currentColor" stroke-width="1.5" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  • Weblog
    • @@ -744,7 +807,7 @@

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    - + See all

    Quick Access

    • Home
      • -
    • Tours
      • +
    • Tours
    • Weblog
    • Contact us
    • About us
      • @@ -1440,11 +1503,11 @@

      Tours

      diff --git a/js/main.js b/js/main.js index 2ae4356..a38f81a 100644 --- a/js/main.js +++ b/js/main.js @@ -64,7 +64,7 @@ } /* ---------- sticky header past the hero ---------- */ - var hero = document.querySelector('.hero'); + var hero = document.querySelector('.hero, .hero-tour'); if (header && hero && 'IntersectionObserver' in window) { var sentinel = document.createElement('div'); sentinel.setAttribute('aria-hidden', 'true'); @@ -158,4 +158,262 @@ console.log('Booking request', data); }); } + + /* ---------- tour details: check availability ---------- */ + var availability = document.getElementById('availability'); + if (availability) { + availability.addEventListener('submit', function (e) { + e.preventDefault(); + console.log('Availability request'); + }); + } + + + /* ---------- tour archive: filtering, sorting, pagination ---------- */ + var filters = document.getElementById('filters'); + var grid = document.getElementById('tourGrid'); + + if (filters && grid) { + var PER_PAGE = 9; + /* the card the design highlights — the middle one of a full row of three */ + var HIGHLIGHT = 4; + + var items = Array.prototype.slice.call(grid.querySelectorAll('.titem')); + var pager = document.getElementById('pager'); + var pagerPages = document.getElementById('pagerPages'); + var prevBtn = pager && pager.querySelector('[data-page="prev"]'); + var nextBtn = pager && pager.querySelector('[data-page="next"]'); + var countEl = document.getElementById('resultCount'); + var emptyEl = document.getElementById('tourEmpty'); + var resetBtns = Array.prototype.slice.call(document.querySelectorAll('[data-reset]')); + var searchInput = filters.querySelector('#f-q'); + + var matches = items.slice(); + var page = 1; + var searchTimer = null; + + function value(name) { + var field = filters.elements[name]; + return field ? field.value : ''; + } + + function checked(name) { + var field = filters.elements[name]; + return !!(field && field.checked); + } + + function readFilters() { + return { + /* every word has to appear, so "night sydney" finds the same tour + as "sydney night" */ + words: value('q').trim().toLowerCase().split(/\s+/).filter(Boolean), + destination: value('destination'), + category: value('category'), + price: value('price'), + duration: value('duration'), + sort: value('sort') || 'newest', + freeCancellation: checked('free-cancellation'), + bestDeal: checked('best-deal'), + likelyToSellOut: checked('likely-to-sell-out') + }; + } + + function isFiltered(f) { + return !!(f.words.length || f.destination || f.category || f.price || f.duration || + f.freeCancellation || f.bestDeal || f.likelyToSellOut); + } + + /* ranges are inclusive at the top and exclusive at the bottom, so "$50 - $100" + and "Up to $50" tile without both claiming a $50 tour */ + function inPriceRange(price, range) { + if (!range) return true; + if (range === '200-plus') return price > 200; + var bounds = range.split('-'); + var low = Number(bounds[0]); + var high = Number(bounds[1]); + return (low === 0 || price > low) && price <= high; + } + + function keeps(el, f) { + var data = el.dataset; + if (f.destination && data.city !== f.destination) return false; + if (f.category && data.category !== f.category) return false; + if (f.duration && data.duration !== f.duration) return false; + if (!inPriceRange(Number(data.price), f.price)) return false; + if (f.freeCancellation && data.freeCancellation !== 'true') return false; + if (f.bestDeal && data.bestDeal !== 'true') return false; + if (f.likelyToSellOut && data.likelyToSellOut !== 'true') return false; + return f.words.every(function (word) { + return data.search.indexOf(word) > -1; + }); + } + + var SORTS = { + newest: function (a, b) { return Number(b.dataset.added) - Number(a.dataset.added); }, + 'price-asc': function (a, b) { return Number(a.dataset.price) - Number(b.dataset.price); }, + 'price-desc': function (a, b) { return Number(b.dataset.price) - Number(a.dataset.price); }, + rating: function (a, b) { return Number(b.dataset.rating) - Number(a.dataset.rating); }, + duration: function (a, b) { return durationDays(a) - durationDays(b); } + }; + + function durationDays(el) { + return el.dataset.duration === 'half-day' ? 0.5 : Number(el.dataset.duration); + } + + function pageNumbers(total, current) { + var pages = []; + var n; + + /* a short run fits without an ellipsis */ + if (total <= 7) { + for (n = 1; n <= total; n++) pages.push(n); + return pages; + } + + var push = function (n) { + if (n >= 1 && n <= total && pages.indexOf(n) < 0) pages.push(n); + }; + push(1); + push(current - 1); + push(current); + push(current + 1); + push(total); + pages.sort(function (a, b) { return a - b; }); + + var out = []; + pages.forEach(function (n, i) { + if (i > 0 && n - pages[i - 1] > 1) out.push(null); /* an ellipsis */ + out.push(n); + }); + return out; + } + + function renderPager(totalPages) { + if (!pager) return; + pager.hidden = totalPages < 2; + + if (pagerPages) { + var html = ''; + pageNumbers(totalPages, page).forEach(function (n) { + if (n === null) { + html += ''; + return; + } + html += ''; + }); + pagerPages.innerHTML = html; + } + + if (prevBtn) prevBtn.disabled = page === 1; + if (nextBtn) nextBtn.disabled = page === totalPages; + } + + /* built from numbers only, so the markup here is safe to assign as HTML */ + function countText(start, shownCount) { + var total = matches.length; + if (!total) return 'No tours found'; + var noun = total === 1 ? 'tour' : 'tours'; + if (shownCount === total) return 'Showing ' + total + ' ' + noun; + return 'Showing ' + (start + 1) + '–' + (start + shownCount) + + ' of ' + total + ' ' + noun; + } + + function render() { + var totalPages = Math.max(1, Math.ceil(matches.length / PER_PAGE)); + if (page > totalPages) page = totalPages; + + var start = (page - 1) * PER_PAGE; + var shown = matches.slice(start, start + PER_PAGE); + + items.forEach(function (el) { + el.hidden = true; + setHighlight(el, false); + }); + + /* re-order the DOM so the sort order is what a keyboard/screen reader sees */ + matches.forEach(function (el) { + grid.appendChild(el); + }); + + shown.forEach(function (el, i) { + el.hidden = false; + setHighlight(el, shown.length > HIGHLIGHT && i === HIGHLIGHT); + }); + + if (countEl) countEl.innerHTML = countText(start, shown.length); + if (emptyEl) emptyEl.hidden = matches.length > 0; + + renderPager(totalPages); + } + + function setHighlight(el, on) { + el.classList.toggle('is-active', on); + var card = el.querySelector('.dcard'); + var badge = el.querySelector('.ring-badge--card'); + if (card) card.classList.toggle('is-active', on); + if (badge) badge.classList.toggle('ring-badge--accent', on); + } + + function apply(resetPage) { + var f = readFilters(); + matches = items.filter(function (el) { return keeps(el, f); }); + matches.sort(SORTS[f.sort] || SORTS.newest); + if (resetPage !== false) page = 1; + resetBtns.forEach(function (btn) { btn.hidden = !isFiltered(f); }); + render(); + } + + function goToPage(next, totalPages) { + if (next < 1 || next > totalPages || next === page) return; + page = next; + render(); + var list = document.getElementById('tour-list'); + if (list) list.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + + filters.addEventListener('submit', function (e) { + e.preventDefault(); + apply(); + }); + + filters.addEventListener('change', function () { + apply(); + }); + + if (searchInput) { + searchInput.addEventListener('input', function () { + window.clearTimeout(searchTimer); + searchTimer = window.setTimeout(apply, 200); + }); + } + + resetBtns.forEach(function (btn) { + btn.addEventListener('click', function () { + filters.reset(); + apply(); + filters.scrollIntoView({ block: 'center', behavior: 'smooth' }); + }); + }); + + if (pagerPages) { + pagerPages.addEventListener('click', function (e) { + var btn = e.target.closest('[data-page]'); + if (!btn) return; + goToPage(Number(btn.getAttribute('data-page')), + Math.max(1, Math.ceil(matches.length / PER_PAGE))); + }); + } + + if (prevBtn) prevBtn.addEventListener('click', function () { + goToPage(page - 1, Math.max(1, Math.ceil(matches.length / PER_PAGE))); + }); + if (nextBtn) nextBtn.addEventListener('click', function () { + goToPage(page + 1, Math.max(1, Math.ceil(matches.length / PER_PAGE))); + }); + + apply(); + } })(); diff --git a/tour.html b/tour.html new file mode 100644 index 0000000..f4e788f --- /dev/null +++ b/tour.html @@ -0,0 +1,824 @@ + + + + + + + Hop On Hop Off — London Tour + + + + + + + + + + + + + + + + +
      + +
      + + + +
      +
      + + +

      Welcome to

      + +
      +

      London

      + +
      +
      +
      +
      + + +
      +
      +
      +
      +

      London Tour

      + +
      + + + 4.8/5 + + + + + London + + + + + from Mr. Bill + +
      +
      + +
        +
      • + +
        + Duration + 1h 30m +
        +
        • +
      • + +
        + Max Travelers + 15 people +
        +
        • +
      • + +
        + Free Cancellation + Up to 24 hrs +
        +
        • +
      • + +
        + Category + Best Conversion +
        +
        • +
      + +
      +

      Overview

      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit + amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem + ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua

      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

      +
      + +
      +

      Gallery

      +
      + A London street lined with period buildings + A red telephone box on a London street + A palm-lined avenue + Big Ben behind a red double-decker bus + Palm trees against the city skyline +
      +
      + +
      +
      +

      Whats included

      +
        +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

        +
        • +
      • + +

        ed do eiusmod tempor incididunt ut labore et dolo

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

        +
        • +
      • + +

        ed do eiusmod tempor incididunt ut labore et dolo

        +
        • +
      +
      + +
      +

      Whats Not included

      +
        +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

        +
        • +
      • + +

        ed do eiusmod tempor incididunt ut labore et dolo

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

        +
        • +
      +
      +
      + +
      +

      Good to know

      +
        +
      • + +

        Public transportation options are available nearby

        +
        • +
      • + +

        Infants are required to sit on an adult’s lap

        +
        • +
      • + +

        Not recommended for travelers with spinal injuries

        +
        • +
      • + +

        Not recommended for travelers with spinal injuries

        +
        • +
      • + +

        Public transportation options are available nearby

        +
        • +
      • + +

        Infants are required to sit on an adult’s lap

        +
        • +
      +
      + +
      +

      Cancellation Policy

      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

      +
      +
      + +
      + 100% Refund + 24 hours or more before the start time +
      +
      +
      + +
      + 0% Refund + Less than 24 hours before the start time +
      +
      +
      +
      +
      + + +
      +
      +
      + + + + + + + + diff --git a/tourdetailscontent.html b/tourdetailscontent.html new file mode 100644 index 0000000..3bcb6bc --- /dev/null +++ b/tourdetailscontent.html @@ -0,0 +1,774 @@ +
      +
      +

      London Tour

      +
      +
      + + + +
      +

      + 4.8 +

      +

      + /5 +

      +
      +
      + + + +
      + + + + + + +

      + London +

      +
      + + + +
      + + + + + + +

      + from Mr. Bill +

      +
      +
      +
      +
      +
      + + + + + + + + + + + + +
      +

      + Duration +

      +

      + 1h 30m +

      +
      +
      +
      + + + + +
      +

      + Max Travelers +

      +

      + 15 people +

      +
      +
      +
      + + + + +
      +

      + Free Cancellation +

      +

      + Up to 24 hrs +

      +
      +
      +
      + + + + + + + + + + + + + +
      +

      + Category +

      +

      + Best Conversion +

      +
      +
      +
      +
      +

      + Overview +

      +

      + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem + ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua + +
      +
      + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua + +

      +
      +
      +

      + Gallery +

      +
      + +
      + + +
      +
      + + +
      +
      +
      +
      +
      +

      + Whats included +

      +
      +
      + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. +

      +
      +
      +
      + + + +
      +

      + ed do eiusmod tempor incididunt ut labore et dolo +

      +
      +
      +
      + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. +

      +
      +
      +
      + + + +
      +

      + ed do eiusmod tempor incididunt ut labore et dolo +

      +
      +
      +
      +

      + Whats Not included +

      +
      +
      + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. +

      +
      +
      +
      + + + +
      +

      + ed do eiusmod tempor incididunt ut labore et dolo +

      +
      +
      +
      + + + +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. +

      +
      +
      +
      +
      +

      + Good to know +

      +
      +
      + + + + + + + + + + + + +

      + Public transportation options are available nearby +

      +
      +
      + + + + + + + + + + + + +

      + Infants are required to sit on an adultu2019s lap +

      +
      +
      + + + + + + + + + + + + +

      + Not recommended for travelers with spinal injuries +

      +
      +
      +
      +
      + + + + + + + + + + + + +

      + Not recommended for travelers with spinal injuries +

      +
      +
      + + + + + + + + + + + + +

      + Public transportation options are available nearby +

      +
      +
      + + + + + + + + + + + + +

      + Infants are required to sit on an adultu2019s lap +

      +
      +
      +
      +
      +
      +

      + Cancellation Policy +

      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. +

      +
      +
      +
      + + + +
      +

      + 100% Refund +

      +

      + 24 hours or more before the start time +

      +
      +
      +
      + + + +
      +

      + 0% Refund +

      +

      + Less than 24 hours before the start time +

      +
      +
      +
      +
      +
      ; \ No newline at end of file diff --git a/tourdetailsinfo.html b/tourdetailsinfo.html new file mode 100644 index 0000000..7e282b8 --- /dev/null +++ b/tourdetailsinfo.html @@ -0,0 +1,118 @@ +
      +
      +
      + + + + + + + + + + + + +

      + Tour Details +

      +
      +
      +
      +
      +

      + From +

      +
      +

      $30

      +
      +
      +

      + USD / Per person +

      +
      +
      +

      + Check Availability +

      +
      +
      +
      + + + + +
      +

      + Free Cancellation +

      +

      + Up to 24 hrs +

      +
      +
      +
      + + + + +
      +

      + Reserve now, pay later! +

      +

      + Secure your spot today +

      +
      +
      +
      ; \ No newline at end of file diff --git a/tours.html b/tours.html new file mode 100644 index 0000000..1aafd13 --- /dev/null +++ b/tours.html @@ -0,0 +1,2191 @@ + + + + + + + Hop On Hop Off — Explore Tours + + + + + + + + + + + + + + + + +
      + +
      +
      + + +
      + +
      +

      Tour & Travel

      + +

      Explore Tours

      + +
      +
      +
      + + +
      + +
      + + + +
      + +
      + + + +
      + +
      + + + +
      + +
      + + + +
      + + +
      + +
      +
      + + + +
      + +
      + + + + +
      + + +
      +
      +
      +
      +
      + + + + + + + +
      + + +
      +
      +
      +

      Showing 1–9 of 36 tours

      + +
      + +
        +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      • + +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem…

        +
        • +
      + + + + +
      +
      +
      + + + + + + + +