Jump to content

Tommyhiggs

Member
  • Posts

    13
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Tommyhiggs's Achievements

  1. <main> <script type="text/javascript" id=""> var __dispatched__ = {}, __i__ = self.postMessage && setInterval(function() { if (self.PrivacyManagerAPI && __i__) { var b = { PrivacyManagerAPI: { action: "getConsentDecision", timestamp: (new Date).getTime(), self: self.location.host } }; self.top.postMessage(JSON.stringify(b), "*"); __i__ = clearInterval(__i__) } }, 50); self.addEventListener("message", function(b, a) { try { if (b.data && (a = JSON.parse(b.data)) && (a = a.PrivacyManagerAPI) && a.capabilities && "getConsentDecision" == a.action) { var d = self.PrivacyManagerAPI.callApi("getGDPRConsentDecision", self.location.host).consentDecision; d && d.forEach(function(c) { __dispatched__[c] || (self.dataLayer && self.dataLayer.push({ event: "GDPR Pref Allows " + c }), __dispatched__[c] = 1) }) } } catch (c) {} }); </script> <div class="templates theme-dark-background" data-component-name="templates" data-component-id="7" data-reveal-parent="" data-scrolled-into-view="true" data-scrolled-past-view="false" data-has-intersected="true"> <div class="templates__wrapper"> <div class="templates__templates-container"> <div class="templates__goals-container" data-reveal-self="" data-scrolled-into-view="true" data-scrolled-past-view="false" data-has-intersected="true"> <ol class="templates__goals-list"> <li style="--reveal-delay: calc(2 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="local-business" data-identifier="local-business" data-section="templates"> <span property="name">Branding <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(3 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="portfolio" data-identifier="portfolio" data-section="templates"> <span property="name">3D Visuals<aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(4 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="blog" data-identifier="blog" data-section="templates"> <span property="name">Typographic <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(5 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="restaurant" data-identifier="restaurant" data-section="templates"> <span property="name">Publication <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(6 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="services" data-identifier="services" data-section="templates"> <span property="name">Digital <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(7 * 0.05s);"> <a class="templates__goal-link is-active" href="/templates" property="item" typeof="WebPage" data-template-category="personal-cv" data-identifier="personal-cv" data-section="templates"> <span property="name">Lab <aside>→</aside> </span> </a> </li> </ol> </div> <div class="templates__images"> <div class="templates__image is-loaded is-active" role="img" aria-label="Desktop version of the Suhama template." tabindex="0" data-template-category="personal-cv" style="background-image: url(&quot;https://media-www.sqspcdn.com/images/components/templates/desktop/suhama-2-2500w.jpg&quot;);"> <img data-load="false" data-use-bg-image="true" data-size-format="filename" data-image-dimensions="2331x1458" data-src="https://media-www.sqspcdn.com/images/components/templates/desktop/suhama-2.jpg" style="display: none;" class="" data-image-resolution="2500w" alt="Desktop version of the Suhama template."> </div> </div> </div> </div> </div> <style> </main> <style> *, :before, :after { -webkit-box-sizing: inherit; box-sizing: inherit; } templates__image is-loaded .element.style { background-image: url(https://media-www.sqspcdn.com/images/components/templates/desktop/altaloma-2500w.jpg); } .te } @media (min-width: 768px) .templates__images { width: calc((((100% - 200px)/6)*3) + 80px + 0px); margin-bottom: 0; } .templates__images { position: relative; display: block; margin-bottom: 32px; width: 100%; -ms-flex-item-align: start; align-self: flex-start; } html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button { vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0; } .theme-dark-background a { color: #fff; } .templates { background-color: #0a0a0a; } @media all and (min-width: 1440px) { .templates__wrapper { padding-left: 40px; padding-right: 40px; } } @media all and (min-width: 1440px) { .templates__wrapper { padding-top: 80px; padding-bottom: 80px; } } @media all and (min-width: 1280px) { .templates__heading h3 { font-size: 50px; } } @media all and (min-width: 1440px) { .templates__heading h3 { font-size: 56px; } } .templates__heading h3 .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__heading h3 { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__heading h3 { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 768px) { .templates__heading h3 { margin-bottom: 16px; } } @media all and (min-width: 1280px) { .templates__heading h3 { margin-bottom: 20px; } } .templates__heading h3[data-has-intersected="true"] { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__heading p { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; --reveal-delay: 0.1s; max-width: 14em; } .templates__heading p .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__heading p { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__heading p { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 375px) { .templates__heading p { max-width: 18em; } } @media all and (min-width: 768px) { .templates__heading p { max-width: 25em; } } .templates__heading p[data-has-intersected="true"] { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__heading-wrapper { position: relative; } .templates__templates-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @media all and (min-width: 768px) { .templates__templates-container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media all and (min-width: 1280px) { .templates__goals-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .templates__goals-container[data-has-intersected="true"] ol li, .templates__goals-container[data-has-intersected="true"] .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__goals-container li { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: var(--reveal-delay); -o-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); margin-bottom: 12px; } .templates__goals-container li .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__goals-container li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__goals-container li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 1024px) { .templates__goals-container li { margin-bottom: 16px; } } .templates__goals-container li:last-child { margin-bottom: 30px; } @media all and (min-width: 1280px) { .templates__goals-container li:last-child { margin-bottom: 0; } } .templates__goal-link { position: relative; text-transform: initial; opacity: 0.3; -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); font-size: 24px; line-height: 1.2em; } @media all and (min-width: 768px) { .templates__goal-link { font-size: 32px; line-height: 1em; } } @media all and (min-width: 1024px) { .templates__goal-link { font-size: 40px; } } @media all and (min-width: 1440px) { .templates__goal-link { font-size: 48px; } } @media all and (min-width: 1920px) { .templates__goal-link { font-size: 64px; } } .templates__goal-link::after { content: ""; position: absolute; width: 100%; height: 2px; left: 0; bottom: 1px; background-color: currentColor; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } @media all and (min-width: 1024px) { .templates__goal-link::after { height: 3px; } } .templates__goal-link aside { display: inline-block; top: 6px; opacity: 0; -webkit-transform: translateX(-5px); transform: translateX(-5px); -webkit-transition: opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); } .templates__goal-link:hover, .templates__goal-link.is-active { opacity: 1; } .templates__goal-link:hover::after, .templates__goal-link.is-active::after { -webkit-transform: scaleX(1); transform: scaleX(1); } .templates__goal-link:hover aside, .templates__goal-link.is-active aside { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__images { position: relative; display: block; margin-bottom: 32px; width: 100%; -ms-flex-item-align: start; align-self: flex-start; } .templates__images:before { display: block; content: ""; width: 100%; padding-top: 62.548%; } .templates__images > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; } @media all and (min-width: 768px) { .templates__images { width: calc((((100% - 200px) / 6) * 3) + 80px + 0px); margin-bottom: 0; } } @media all and (min-width: 1024px) { .templates__images { width: calc((((100% - 440px) / 12) * 7) + 240px + 0px); } } .templates__image { background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); -o-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: opacity, transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.3s, 0.8s; -o-transition-duration: 0.3s, 0.8s; transition-duration: 0.3s, 0.8s; -webkit-transition-timing-function: step-end, step-end; -o-transition-timing-function: step-end, step-end; transition-timing-function: step-end, step-end; -webkit-transform: translateX(-10px); transform: translateX(-10px); z-index: 1; } .templates__image.is-loaded { opacity: 1; } .templates__image img { height: 100%; width: 100%; } .templates__image.is-loaded { opacity: 0; } .templates__image.is-active { opacity: 1; z-index: 2; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); } .templates__image img { opacity: 0; } .templates__all-templates-link { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: var(--reveal-delay); -o-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); } .templates__all-templates-link .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } </style>
  2. I could make it more or less work but I don´t know how to link my images, when I change the url it doesn´t work. Could anyone help me to see what I am doing wrong: Thanks,
  3. Hi everyone, I trying to do the same concept of the current website of squarespace. There is a left side links that when you hover the text it shows an image in the right side. Source: https://www.squarespace.com/ Thanks,
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.