diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ace9323 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +.idea +*.iml +/venv +**/node_modules/* +*.DS_Store +# Local Netlify folder +.netlify diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b403cf1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "emmet.includeLanguages": { + "twig": "html" + } +} \ No newline at end of file diff --git a/assets/css/landing.css b/assets/css/landing.css new file mode 100644 index 0000000..363038a --- /dev/null +++ b/assets/css/landing.css @@ -0,0 +1,740 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("../fonts/Inter-Light.woff2?v=3.18") format("woff2"), url("../fonts/Inter-Light.woff?v=3.18") format("woff"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("../fonts/Inter-Regular.woff2?v=3.18") format("woff2"), url("../fonts/Inter-Regular.woff?v=3.18") format("woff"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("../fonts/Inter-Medium.woff2?v=3.18") format("woff2"), url("../fonts/Inter-Medium.woff?v=3.18") format("woff"); +} +body { + font-family: "Inter", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + color: #F5F5F5; +} + +.h2 { + color: #F5F5F5; + font-size: 40px; + line-height: 1.3; + font-weight: 400; +} +@media (max-width: 929px) { + .h2 { + font-size: 32px; + } +} + +.h3 { + color: #F5F5F5; + font-size: 28px; + line-height: 1.3; + font-weight: 400; +} + +:focus { + outline: 4px solid rgba(0, 125, 250, 0.6); + z-index: 1; +} + +.gallery__artwork > a:focus, .testimonials__figure:focus { + outline-offset: -4px; +} + +:focus[data-focus-method=mouse] { + outline: none; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +.container-xl, .container-l, .container-m, .container-s, .nav-primary__main { + margin-right: auto; + margin-left: auto; +} + +body, html { + background-color: black; +} + +.wrapper { + max-width: 2000px; + margin: 0 auto; +} + +.left-indent { + margin-left: 25%; + transition: margin-left 0.3s ease-in-out; +} +@media (max-width: 929px) { + .left-indent { + margin-left: 10%; + } +} +@media (max-width: 575px) { + .left-indent { + margin-left: 40px; + } +} + +.container-s, .nav-primary__main { + max-width: 50%; +} +.container-m { + max-width: 75%; +} +.container-l { + max-width: 1200px; +} +.container-xl { + width: 100%; +} + +.cut-overflow { + overflow: hidden; +} + +.size-6 { + width: 50%; +} +@media (max-width: 929px) { + .size-6 { + width: 80%; + } +} +@media (max-width: 575px) { + .size-6 { + width: calc(100% - 80px); + } +} + +.size-7 { + width: 58.3333333333%; +} +@media (max-width: 929px) { + .size-7 { + width: 80%; + } +} +@media (max-width: 575px) { + .size-7 { + width: calc(100% - 80px); + } +} + +.size-8 { + width: 66.6666666667%; +} +@media (max-width: 929px) { + .size-8 { + width: 80%; + } +} +@media (max-width: 575px) { + .size-8 { + width: calc(100% - 80px); + } +} + +.size-9 { + width: 75%; +} +@media (max-width: 929px) { + .size-9 { + width: 80%; + } +} +@media (max-width: 575px) { + .size-9 { + width: calc(100% - 80px); + } +} + +.left-indent-1 { + margin-left: 8.3333333333%; +} +@media (max-width: 929px) { + .left-indent-1 { + margin-left: 10%; + } +} +@media (max-width: 575px) { + .left-indent-1 { + margin-left: 40px; + } +} + +.left-indent-2 { + margin-left: 16.6666666667%; +} +@media (max-width: 929px) { + .left-indent-2 { + margin-left: 10%; + } +} +@media (max-width: 575px) { + .left-indent-2 { + margin-left: 40px; + } +} + +@media (max-width: 575px) { + .mobile-wide-layout { + margin-left: 32px; + width: calc(100% - 64px); + } +} + +.gap { + width: 100%; + height: 148px; +} +@media (max-width: 929px) { + .gap { + height: 64px; + } +} + +.big-gap { + width: 100%; + height: 200px; +} +@media (max-width: 929px) { + .big-gap { + height: 96px; + } +} + +.ml-8 { + margin-left: 8px; +} + +.mt-8 { + margin-top: 8px; +} + +.mb-32 { + margin-bottom: 32px; +} + +.btn { + display: inline-block; + font-weight: 400; + text-align: center; + text-decoration: none; + vertical-align: middle; + user-select: none; + color: #F5F5F5; + border: 2px solid #F5F5F5; + cursor: pointer; + border-radius: 25px; +} +.btn--secondary { + padding: 10px 18px; + line-height: 14px; + font-size: 14px; +} +.btn--primary { + box-sizing: border-box; + padding: 10px 18px; + line-height: 14px; + font-size: 14px; + background-color: #FFFFFF; + color: #000000; +} + +input[type=text] + .btn { + margin-left: 8px; +} + +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100vh - 30px); +} +@media (max-width: 575px) { + .wrapper { + height: calc(100vh - 80px); + } +} + +.landing { + position: relative; + height: calc(100vh - 68px); + min-height: 450px; + background-size: cover; + background-position: center; +} +@media (max-width: 575px) { + .landing { + height: calc(100vh - 160px); + } +} +.landing__logo { + margin-bottom: 34px; +} +@media (max-width: 768px) { + .landing__logo { + display: none; + } +} +.landing .badge { + position: absolute; + top: 10px; + right: -200px; +} +@media (max-width: 768px) { + .landing .badge { + top: 110px; + right: 0; + } +} +@media (max-width: 425px) { + .landing .badge { + top: 60px; + } +} +@media (max-width: 375px) { + .landing .badge { + top: -130px; + } +} +.landing__title { + position: relative; + font-size: 60px; + font-weight: 300; + line-height: 1.2; + color: white; + z-index: 2; +} +.landing__title em { + color: rgba(255, 255, 255, 0.5); +} +@media (max-width: 575px) { + .landing__title { + font-size: 38px; + } +} +.landing__trustedby { + margin-top: 16px; + margin-bottom: 115px; +} +.landing .landing__hero, .landing .landing__trustedby { + position: relative; + z-index: 1; +} +.landing .container-xl { + z-index: 15; +} +.landing:after { + content: ""; + position: absolute; + height: 160px; + bottom: -68px; + left: 0; + right: 0; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); +} +@media (max-width: 575px) { + .landing:after { + bottom: -160px; + } +} + +.nav-primary { + position: relative; + padding: 20px 0; + min-height: 48px; +} +.nav-primary__logo { + position: absolute; + top: 20px; + left: 20px; + z-index: 1001; + width: 58px; + height: 58px; +} +@media (max-width: 575px) { + .nav-primary__logo { + width: 40px; + height: 40px; + } +} +.nav-primary__logo svg { + max-width: 100%; +} +.nav-primary__link { + display: inline-block; + margin-right: 36px; + padding: 16px 0; + font-size: 16px; + color: #F5F5F5; + text-decoration: none; + border-bottom: 2px solid transparent; +} +.nav-primary .nav-primary__secondary .nav-primary__link { + margin-right: 20px; +} +@media (max-width: 929px) { + .nav-primary__main { + max-width: none; + margin: 0; + } +} +.nav-primary__secondary { + position: absolute; + right: 20px; + top: 20px; +} +@media (max-width: 929px) { + .nav-primary__secondary { + position: static; + } +} +.nav-primary__toggle { + display: none; + position: absolute; + z-index: 1001; + right: 12px; + top: 7px; + background-color: transparent; + border: none; + padding: 0; +} +.nav-primary__toggle .ham { + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transition: transform 400ms; + user-select: none; +} +.nav-primary__toggle .ham__line { + fill: none; + transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; + stroke: #FFFFFF; + stroke-width: 4; +} +.nav-primary__toggle .ham__line--top, .nav-primary__toggle .ham__line--bottom { + stroke-dasharray: 40 121; +} +.nav-primary__toggle[aria-expanded=true] .ham { + transform: rotate(45deg); +} +.nav-primary__toggle[aria-expanded=true] .ham__line--top, .nav-primary__toggle[aria-expanded=true] .ham__line--bottom { + stroke-dashoffset: -68px; +} +@media (max-width: 575px) { + .nav-primary__toggle { + display: block; + } +} +@media (max-width: 929px) { + .nav-primary__collapse { + display: flex; + justify-content: flex-end; + } +} +@media (max-width: 575px) { + .nav-primary__collapse { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background-color: #000000; + z-index: 1000; + flex-direction: column; + align-items: flex-end; + justify-content: flex-start; + } + .nav-primary__collapse .nav-primary__main { + margin-top: 100px; + display: flex; + flex-direction: column; + text-align: right; + } + .nav-primary__collapse .nav-primary__link { + margin-right: 32px !important; + display: block !important; + } +} +@media (max-width: 575px) { + .nav-primary__toggle[aria-expanded=true] + .nav-primary__collapse { + display: flex; + } +} + +.navigation-active { + overflow: hidden; +} + +.product { + position: relative; + padding: 190px 0; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} +.product__logo { + position: absolute; + width: 58px; + height: 58px; + left: 32px; + top: 214px; +} +@media (max-width: 929px) { + .product__logo { + top: 118px; + left: 10%; + width: 40px; + height: 40px; + } +} +.product__line { + position: relative; +} +.product__line:before { + top: 0; + left: 0; + display: block; + content: ""; + height: 4px; + width: 100%; + background-color: rgba(255, 255, 255, 0.4); +} +@media (max-width: 929px) { + .product__line:before { + height: 2px; + } +} +.product__main { + padding-top: 24px; +} +.product__name, .product__description { + font-size: 35px; + line-height: 1.2; + color: #FFF; +} +@media (max-width: 929px) { + .product__name, .product__description { + font-size: 24px; + } +} +.product__description { + opacity: 0.5; +} +.product__info { + position: relative; + padding-bottom: 100px; +} +.product__features { + position: absolute; + left: 100%; + top: 0; + width: 25%; + color: rgba(255, 255, 255, 0.8); + font-size: 14px; + line-height: 1.6; + font-weight: 500; + list-style-type: "+"; +} +@media (max-width: 768px) { + .product__features { + display: none; + } +} +.product__feature { + padding-left: 8px; +} +.product--pco { + background-image: url("../images/products/planet.jpg"); +} +.product--psa { + background-image: url("../images/products/atmosphere.jpg"); +} +.product--pow { + background-image: url("../images/products/ocean.jpg"); +} + +.pill { + display: inline-flex; + padding: 4px; + min-height: 30px; + background-color: #4030FF; + border-radius: 100px; +} +.pill__content { + display: flex; + align-items: center; + padding: 0 18px; + font-size: 14px; +} +.pill__content b { + margin-right: 4px; + font-weight: 700; +} + +.note { + font-size: 12px; + line-height: 1.2; + color: rgba(255, 255, 255, 0.5); +} + +.input { + padding: 0 20px; + width: 180px; + box-sizing: border-box; + border-radius: 100px; + border: none; + background-color: rgba(45, 43, 68, 0.5); + color: #FFFFFF; +} +.input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: white; +} + +.trusted-by__label { + display: block; + margin-bottom: 12px; + color: rgba(255, 255, 255, 0.3); + font-size: 11px; + line-height: 1.2; +} +.trusted-by__companies { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} +@media (max-width: 768px) { + .trusted-by__companies { + justify-content: left; + } +} +.trusted-by__company { + margin-right: 18px; +} +.trusted-by__company:nth-child(1) > img { + max-height: 38px; +} +.trusted-by__company:nth-child(5) > img { + max-height: 41px; +} + +.footer { + padding-bottom: 32px; +} +.footer__links { + display: flex; +} +@media (max-width: 575px) { + .footer__links { + flex-direction: column; + } +} +.footer__link { + color: #F5F5F5; + font-size: 16px; + line-height: 1.3; + text-decoration: none; +} +.footer__link + .footer__link { + margin-left: 32px; +} +@media (max-width: 575px) { + .footer__link + .footer__link { + margin-left: 0px; + margin-top: 12px; + } +} +.footer__socials { + margin-top: 32px; + display: flex; +} +.footer__social > svg { + width: 24px; + height: 24px; + fill: #F5F5F5; +} +.footer__social + .footer__social { + margin-left: 32px; +} +.footer__copyrights { + margin-top: 100px; + font-size: 12px; + line-height: 1.3; + color: rgba(255, 255, 255, 0.5); +} +@media (max-width: 575px) { + .footer__copyrights { + margin-top: 64px; + } +} \ No newline at end of file diff --git a/assets/fonts/Inter-Light.woff b/assets/fonts/Inter-Light.woff new file mode 100644 index 0000000..568c5f7 Binary files /dev/null and b/assets/fonts/Inter-Light.woff differ diff --git a/assets/fonts/Inter-Light.woff2 b/assets/fonts/Inter-Light.woff2 new file mode 100644 index 0000000..5ed9c1d Binary files /dev/null and b/assets/fonts/Inter-Light.woff2 differ diff --git a/assets/fonts/Inter-Medium.woff b/assets/fonts/Inter-Medium.woff new file mode 100644 index 0000000..74eeb02 Binary files /dev/null and b/assets/fonts/Inter-Medium.woff differ diff --git a/assets/fonts/Inter-Medium.woff2 b/assets/fonts/Inter-Medium.woff2 new file mode 100644 index 0000000..273aa01 Binary files /dev/null and b/assets/fonts/Inter-Medium.woff2 differ diff --git a/assets/fonts/Inter-Regular.woff b/assets/fonts/Inter-Regular.woff new file mode 100644 index 0000000..6d2527c Binary files /dev/null and b/assets/fonts/Inter-Regular.woff differ diff --git a/assets/fonts/Inter-Regular.woff2 b/assets/fonts/Inter-Regular.woff2 new file mode 100644 index 0000000..d62ef96 Binary files /dev/null and b/assets/fonts/Inter-Regular.woff2 differ diff --git a/assets/images/physical-addons-logo-old.svg b/assets/images/physical-addons-logo-old.svg new file mode 100644 index 0000000..a489fb3 --- /dev/null +++ b/assets/images/physical-addons-logo-old.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/physical-addons-logo.svg b/assets/images/physical-addons-logo.svg new file mode 100644 index 0000000..fe2dc5b --- /dev/null +++ b/assets/images/physical-addons-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/primary-btn.jpg b/assets/images/primary-btn.jpg new file mode 100644 index 0000000..f54ce2e Binary files /dev/null and b/assets/images/primary-btn.jpg differ diff --git a/assets/images/products/atmosphere.jpg b/assets/images/products/atmosphere.jpg new file mode 100644 index 0000000..62a2e54 Binary files /dev/null and b/assets/images/products/atmosphere.jpg differ diff --git a/assets/images/products/ocean.jpg b/assets/images/products/ocean.jpg new file mode 100644 index 0000000..e6875aa Binary files /dev/null and b/assets/images/products/ocean.jpg differ diff --git a/assets/images/products/planet.jpg b/assets/images/products/planet.jpg new file mode 100644 index 0000000..5d73ccc Binary files /dev/null and b/assets/images/products/planet.jpg differ diff --git a/assets/images/psa-logo.png b/assets/images/psa-logo.png new file mode 100644 index 0000000..455173c Binary files /dev/null and b/assets/images/psa-logo.png differ diff --git a/assets/images/psa-logo.svg b/assets/images/psa-logo.svg new file mode 100644 index 0000000..cfba5dd --- /dev/null +++ b/assets/images/psa-logo.svg @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/assets/images/trusted-by/1.png b/assets/images/trusted-by/1.png new file mode 100644 index 0000000..c88378d Binary files /dev/null and b/assets/images/trusted-by/1.png differ diff --git a/assets/images/trusted-by/2.svg b/assets/images/trusted-by/2.svg new file mode 100644 index 0000000..5f0b7f3 --- /dev/null +++ b/assets/images/trusted-by/2.svg @@ -0,0 +1,49 @@ + diff --git a/assets/images/trusted-by/3.svg b/assets/images/trusted-by/3.svg new file mode 100644 index 0000000..e91b604 --- /dev/null +++ b/assets/images/trusted-by/3.svg @@ -0,0 +1,3 @@ + diff --git a/assets/images/trusted-by/4.svg b/assets/images/trusted-by/4.svg new file mode 100644 index 0000000..99bb37d --- /dev/null +++ b/assets/images/trusted-by/4.svg @@ -0,0 +1,3 @@ + diff --git a/assets/images/trusted-by/5.png b/assets/images/trusted-by/5.png new file mode 100644 index 0000000..75d2819 Binary files /dev/null and b/assets/images/trusted-by/5.png differ diff --git a/assets/images/trusted-by/6.svg b/assets/images/trusted-by/6.svg new file mode 100644 index 0000000..fb62478 --- /dev/null +++ b/assets/images/trusted-by/6.svg @@ -0,0 +1,3 @@ + diff --git a/assets/javascript/general.js b/assets/javascript/general.js new file mode 100644 index 0000000..6d965ca --- /dev/null +++ b/assets/javascript/general.js @@ -0,0 +1,50 @@ +var General = (function (window) { + + function initialize() { + _setFocusMethodForLinks(); + _passReferalCodeToLinks(); + } + + function _setFocusMethodForLinks() { + var links = document.querySelectorAll('a, [tabindex="0"]'); + links.forEach(function(link) { + link.addEventListener('mousedown', () => { + link.setAttribute('data-focus-method', 'mouse'); + }); + // link.addEventListener('touchstart', () => { + // link.setAttribute('data-focus-method', 'touch'); + // }); + + link.addEventListener('blur', () => { + link.removeAttribute('data-focus-method'); + }); + // link.addEventListener('touchend', () => { + // link.removeAttribute('data-focus-method'); + // }); + }) + } + + function _passReferalCodeToLinks() { + + var url = new URL(window.location); + var rcode = url.searchParams.get("v"); + if(rcode!==null) { + var bmlinks = document.querySelectorAll("a[href*='blendermarket']") + bmlinks.forEach(function(link) { + href = link.href + conjugator = href.indexOf('?') !== -1 ? '&' : '?' + link.setAttribute('href', href+conjugator+'ref='+rcode); + }) + } + } + + return { + init: initialize + }; +})(window); + +General.init(); + + + + diff --git a/assets/javascript/navigation.js b/assets/javascript/navigation.js new file mode 100644 index 0000000..ca31740 --- /dev/null +++ b/assets/javascript/navigation.js @@ -0,0 +1,47 @@ +var Navigation = (function (window) { + + function initialize() { + _showLogoBelowY() + var toggleBtn = document.querySelector('.nav-primary__toggle') + toggleBtn.addEventListener('click', function() { + var expanded = this.getAttribute('aria-expanded') + expanded = (expanded === 'false')? false : true; // why Boolean('false') is true? + this.setAttribute('aria-expanded', !expanded) + if (expanded) { + document.body.classList.remove('navigation-active') + } else { + document.body.classList.add('navigation-active') + } + }) + } + + function _showLogoBelowY() { + var nav = document.querySelector('.nav-secondary') + var logo = document.querySelector('.nav-secondary__logo') + if (nav===null) return; + document.addEventListener('scroll', function(event){ + if(window.pageYOffset >= nav.offsetTop) { + if(!logo.classList.contains('nav-secondary__logo--show')) { + logo.classList.add('nav-secondary__logo--show') + } + } else { + if (nav.offsetTop - window.pageYOffset > 80) { + if(logo.classList.contains('nav-secondary__logo--show')) { + logo.classList.remove('nav-secondary__logo--show') + } + } + } + }); + } + + return { + init: initialize + }; +})(window); + +Navigation.init(); + +// debounce(function(){ +// console.log('artwork width', artwork.offsetWidth) +// grid.style.gridAutoRows = artwork.offsetWidth+'px' +// },100) \ No newline at end of file diff --git a/index.html b/index.html index 5c63939..9d1452f 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,221 @@ - +
- - - -

Procedural planets
with 1 click
Cinematic atmosphere
with 1 click
Realistic oceans and seas
with 1 click