v1.0.1 - contact form needs testing
This commit is contained in:
Spencer Flagg
parent
4c93f268d7
commit
03d2367ce0
82 changed files with 1251 additions and 863 deletions
|
|
@ -26,7 +26,7 @@ module.exports = function (eleventyConfig) {
|
|||
eleventyConfig.addPlugin(i18n, {
|
||||
translations,
|
||||
fallbackLocales: {
|
||||
'es-ES': 'en-US'
|
||||
'*': 'en-US'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ module.exports = function (eleventyConfig) {
|
|||
files: './_site/assets/styles/main.css',
|
||||
});
|
||||
|
||||
// use this to redirect to en-GB
|
||||
// use this to redirect to en-US
|
||||
// eleventyConfig.setBrowserSyncConfig({
|
||||
// files: './_site/assets/styles/main.css',
|
||||
// callbacks: {
|
||||
|
|
@ -50,7 +50,7 @@ module.exports = function (eleventyConfig) {
|
|||
// bs.addMiddleware('*', (req, res) => {
|
||||
// if (req.url === '/') {
|
||||
// res.writeHead(302, {
|
||||
// location: '/en-GB/'
|
||||
// location: '/en-US/'
|
||||
// });
|
||||
// res.end();
|
||||
// }
|
||||
|
|
@ -62,7 +62,9 @@ module.exports = function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy("styles/fonts");
|
||||
eleventyConfig.addPassthroughCopy("src/assets/images/**/*.png");
|
||||
eleventyConfig.addPassthroughCopy("src/assets/images/**/*.svg");
|
||||
eleventyConfig.addPassthroughCopy("src/assets/images/**/*.jpg");
|
||||
eleventyConfig.addPassthroughCopy("node_modules/@glidejs/glide/dist");
|
||||
eleventyConfig.addPassthroughCopy("node_modules/blueimp-md5/js");
|
||||
|
||||
eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
|
||||
if (outputPath.endsWith('.html')) {
|
||||
|
|
|
|||
77
package-lock.json
generated
77
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.4.1",
|
||||
"blueimp-md5": "^2.19.0",
|
||||
"eleventy-plugin-i18n": "^0.1.3",
|
||||
"fast-glob": "^3.2.7"
|
||||
},
|
||||
|
|
@ -39,7 +40,9 @@
|
|||
"prettier": "^2.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"serve": "^11.3.2",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"tailwindcss": "^2.1.2",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.37.1",
|
||||
"webpack-cli": "^4.7.0"
|
||||
}
|
||||
|
|
@ -1708,6 +1711,11 @@
|
|||
"integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/blueimp-md5": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
|
||||
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
|
|
@ -13235,6 +13243,22 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/svg-url-loader": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-7.1.1.tgz",
|
||||
"integrity": "sha512-NlsMCePODm7FQhU9aEZyGLPx5Xe1QRI1cSEUE6vTq5LJc9l9pStagvXoEIyZ9O3r00w6G3+Wbkimb+SC3DI/Aw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"file-loader": "~6.2.0",
|
||||
"loader-utils": "~2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
|
@ -14355,6 +14379,33 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/url-loader": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
|
||||
"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0",
|
||||
"mime-types": "^2.1.27",
|
||||
"schema-utils": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"file-loader": "*",
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"file-loader": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/url-parse-lax": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
|
||||
|
|
@ -16518,6 +16569,11 @@
|
|||
"integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
|
||||
"dev": true
|
||||
},
|
||||
"blueimp-md5": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
|
||||
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
|
||||
},
|
||||
"boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
|
|
@ -25515,6 +25571,16 @@
|
|||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"svg-url-loader": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-7.1.1.tgz",
|
||||
"integrity": "sha512-NlsMCePODm7FQhU9aEZyGLPx5Xe1QRI1cSEUE6vTq5LJc9l9pStagvXoEIyZ9O3r00w6G3+Wbkimb+SC3DI/Aw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"file-loader": "~6.2.0",
|
||||
"loader-utils": "~2.0.0"
|
||||
}
|
||||
},
|
||||
"svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
|
@ -26422,6 +26488,17 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"url-loader": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
|
||||
"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
"mime-types": "^2.1.27",
|
||||
"schema-utils": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"url-parse-lax": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@
|
|||
"prettier": "^2.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"serve": "^11.3.2",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"tailwindcss": "^2.1.2",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.37.1",
|
||||
"webpack-cli": "^4.7.0"
|
||||
},
|
||||
|
|
@ -66,6 +68,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.4.1",
|
||||
"blueimp-md5": "^2.19.0",
|
||||
"eleventy-plugin-i18n": "^0.1.3",
|
||||
"fast-glob": "^3.2.7"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
module.exports = [
|
||||
{ slug: 'home', name: 'Home' },
|
||||
//{ slug: 'home', name: 'Home' },
|
||||
{ slug: 'info', name: 'Info' },
|
||||
{ slug: 'screenshots', name: 'Screenshots' },
|
||||
{ slug: 'systems', name: 'Systems' },
|
||||
{ slug: 'pricing', name: 'Pricing' },
|
||||
{ slug: 'download', name: 'Download' },
|
||||
{ slug: 'reviews', name: 'Reviews' }
|
||||
{ slug: 'reviews', name: 'Reviews' },
|
||||
{ slug: 'contact', name: 'Contact' }
|
||||
|
||||
]
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"site_name": "Visual Anatomy 3d",
|
||||
"title": "Visual Anatomy 3d",
|
||||
"description": "Starter code for your 11ty blog Boilerplate",
|
||||
"url": "https://example.com",
|
||||
"description": "Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.",
|
||||
"url": "http://www.humananatomy3d.app/",
|
||||
"locale": "en",
|
||||
"author": "Anonymous"
|
||||
"author": "Spencer Flagg"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
module.exports = [
|
||||
{ slug: 'skeletal', name: 'Skeletal', status: 'free', order: 1 },
|
||||
{ slug: 'ligamentous', name: 'Ligamentous', status: 'free', order: 1 },
|
||||
{ slug: 'muscular', name: 'Muscular', status: 'pro', order: 1 },
|
||||
{ slug: 'digestive', name: 'Digestive', status: 'pro', order: 1 },
|
||||
{ slug: 'respiratory', name: 'Respiratory', status: 'pro', order: 1 },
|
||||
{ slug: 'urogenital', name: 'Urogenital', status: 'pro', order: 1 },
|
||||
{ slug: 'endocrine', name: 'Endocrine', status: 'pro', order: 1 },
|
||||
{ slug: 'circulatory', name: 'Circulatory', status: 'soon', order: 1 },
|
||||
{ slug: 'nervous', name: 'Nervous', status: 'soon', order: 1 },
|
||||
{ slug: 'limphatic', name: 'Limphatic', status: 'soon', order: 1 }
|
||||
]
|
||||
module.exports = [
|
||||
{ slug: 'skeletal', name: 'Skeletal', status: 'free', order: 1 },
|
||||
{ slug: 'ligamentous', name: 'Ligamentous', status: 'free', order: 2 },
|
||||
{ slug: 'muscular', name: 'Muscular', status: 'pro', order: 3 },
|
||||
{ slug: 'digestive', name: 'Digestive', status: 'pro', order: 4 },
|
||||
{ slug: 'respiratory', name: 'Respiratory', status: 'pro', order: 5 },
|
||||
{ slug: 'urogenital', name: 'Urogenital', status: 'pro', order: 6 },
|
||||
{ slug: 'endocrine', name: 'Endocrine', status: 'pro', order: 7 },
|
||||
{ slug: 'circulatory', name: 'Circulatory', status: 'soon', order: 8 },
|
||||
{ slug: 'nervous', name: 'Nervous', status: 'soon', order: 9 },
|
||||
{ slug: 'lymphatic', name: 'Lymphatic', status: 'soon', order: 10 },
|
||||
{ slug: 'integumentary', name: 'Integumentary', status: 'soon', order: 11 }
|
||||
]
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<article class="blurb__wrapper">
|
||||
<section>
|
||||
<p>
|
||||
Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
|
||||
Learn human anatomy <em>quickly and easily</em> by zooming, panning, hiding layers and interacting in real
|
||||
time.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
|
|
@ -27,113 +28,14 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
article.blurb__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
.blurb__wrapper section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.before-and-after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 300/200;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.before-and-after .img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 900px 100%;
|
||||
}
|
||||
|
||||
.before-and-after .background-img {
|
||||
background-image: url("https://picsum.photos/200/300");
|
||||
border-radius: var(--r-1);
|
||||
background-image: url("./assets/images/slider-1.png");
|
||||
background-position-x: -1px;
|
||||
}
|
||||
|
||||
.before-and-after .foreground-img {
|
||||
background-image: url("https://picsum.photos/200/301");
|
||||
background-image: url("./assets/images/slider-2.png");
|
||||
background-position-x: -1px;
|
||||
width: 50%;
|
||||
|
||||
border-radius: var(--r-1) 0 0 var(--r-1);
|
||||
}
|
||||
|
||||
.before-and-after .slider {
|
||||
position: absolute;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(242, 242, 242, 0.3);
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.before-and-after .slider:hover {
|
||||
background: rgba(242, 242, 242, 0.1);
|
||||
}
|
||||
|
||||
.before-and-after .slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider::-moz-range-thumb {
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
left: calc(50% - 18px);
|
||||
top: calc(50% - 18px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:after {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:before {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
</style>
|
||||
22
src/_includes/contact.ejs
Normal file
22
src/_includes/contact.ejs
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<article class="contact__wrapper">
|
||||
<header>
|
||||
<h1 id="contact">Contact Us</h1>
|
||||
</header>
|
||||
<section>
|
||||
<!-- action="https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php" -->
|
||||
<div class="form">
|
||||
<input type="text" placeholder="👉 your email address goes here" id="fromEmail">
|
||||
<span class="form-alert" id="emailError">your email address isn't valid 👆</span>
|
||||
<textarea placeholder="👇 your message goes here" id="message">
|
||||
</textarea>
|
||||
<button class="btn btn--contact" type="submit" id="contactSubmit" disabled>send <svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="32" height="32"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
<path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
|
||||
</svg></button>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
|
@ -42,52 +42,4 @@
|
|||
</div>
|
||||
</a>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.btn--store {
|
||||
text-align: center;
|
||||
background: orangered;
|
||||
padding: .5rem 1rem;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.download__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.platform__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--p-1);
|
||||
border-radius: var(--r-1);
|
||||
background-color: var(--c-bkg);
|
||||
gap: 1rem;
|
||||
border: 0.3rem solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.platform__wrapper:hover {
|
||||
border-color: orangered;
|
||||
}
|
||||
|
||||
.platform__wrapper:hover .btn--store {
|
||||
background: var(--c-1);
|
||||
}
|
||||
|
||||
.platform__wrapper svg {
|
||||
max-width: 100%;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
.platform__wrapper h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<footer class="text-center">
|
||||
<section>
|
||||
<h3>
|
||||
GraphicViZion
|
||||
<a href="https://www.graphicvizion.com/" target="_blank">GraphicViZion</a>
|
||||
</h3>
|
||||
<div class="copywrite">
|
||||
© 2021 by GraphicViZion
|
||||
</div>
|
||||
<div class="credit">
|
||||
this site was hand-crafted by <a href="https://spencerflagg.com">Spencer Flagg</a>
|
||||
this site was hand-crafted by <a href="https://spencerflagg.com" target="_blank">Spencer Flagg</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://twitter.com/graphicvizion">
|
||||
<a href="https://twitter.com/graphicvizion" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter"
|
||||
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/user/GraphicVizion">
|
||||
<a href="https://www.youtube.com/user/GraphicVizion" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube"
|
||||
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://itunes.apple.com/us/artist/graphicvizion/id492668041">
|
||||
<a href="https://itunes.apple.com/us/artist/graphicvizion/id492668041" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="32"
|
||||
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://play.google.com/store/apps/developer?id=Graphic-ViZion">
|
||||
<a href="https://play.google.com/store/apps/developer?id=Graphic-ViZion" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-google-play"
|
||||
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -62,91 +62,36 @@
|
|||
</svg>
|
||||
Play Store
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
<li><a href="https://www.graphicvizion.com/policies/visualacupunctureprivacypolicy.html" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off" width="32"
|
||||
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="3" y1="3" x2="21" y2="21" />
|
||||
<path d="M10.584 10.587a2 2 0 0 0 2.828 2.83" />
|
||||
<path
|
||||
d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341" />
|
||||
</svg>
|
||||
Privacy Policy</a></li>
|
||||
<li><a href="https://www.graphicvizion.com/policies/visualacupuncturetermsofuse.html" target="_blank"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news" width="32"
|
||||
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11" />
|
||||
<line x1="8" y1="8" x2="12" y2="8" />
|
||||
<line x1="8" y1="12" x2="12" y2="12" />
|
||||
<line x1="8" y1="16" x2="12" y2="16" />
|
||||
</svg>Terms of Use</a></li>
|
||||
<% sections.forEach((link)=> { %>
|
||||
<li>
|
||||
<li class="menu-item">
|
||||
<a href="#<%= link.slug %>">
|
||||
<%= link.name %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
color: var(--c-bkg);
|
||||
gap: 3rem;
|
||||
background: black;
|
||||
width: var(--viewportWidth);
|
||||
margin-top: 2rem;
|
||||
padding: 4rem 2rem 6rem 2rem;
|
||||
}
|
||||
|
||||
footer section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
footer h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
max-height: 8.5rem;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
||||
footer li {
|
||||
line-height: 1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
footer li svg {
|
||||
max-height: 1.7rem;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
footer li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--c-bkg);
|
||||
gap: 0.5rem;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
footer li a:hover {
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
footer li a:hover svg {
|
||||
stroke: var(--c-1);
|
||||
}
|
||||
|
||||
.copywrite {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.credit {
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.credit a {
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
.credit a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</footer>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="hero__wrapper">
|
||||
<% include /nav %>
|
||||
<video autoplay loop muted class="hero__video" id="video-bg">
|
||||
<!--this id is only used for the toggle function; can be removed if you don't need an event -->
|
||||
<!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
|
||||
<source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">https://thumbs.gfycat.com/EthicalMagnificentHart-mobile.mp4
|
||||
</video>
|
||||
<!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
|
||||
<!-- <video autoplay loop muted class="hero__video">
|
||||
<source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">
|
||||
</video> -->
|
||||
<img src="./assets/images/hero.png" class="hero__video">
|
||||
<div class="hero__info">
|
||||
<a class="btn btn--hero" href="#download">
|
||||
download now
|
||||
|
|
@ -27,85 +27,4 @@
|
|||
</svg>
|
||||
<h1 class="h1--hero">muscles, bones, organs and blood vessels in 3D</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero__wrapper {
|
||||
--offset: 8rem;
|
||||
margin-bottom: var(--offset);
|
||||
padding: 0 2rem;
|
||||
--weird-gap: 0.04rem;
|
||||
z-index: 1; /* temp, to overlap slider */
|
||||
}
|
||||
|
||||
.hero__video {
|
||||
border-radius: var(--r-1);
|
||||
}
|
||||
|
||||
.hero__banner {
|
||||
background: var(--c-bkg);
|
||||
border-radius: var(--r-1) var(--r-1) 0 0;
|
||||
padding: var(--p-1);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--offset));
|
||||
left: 6rem;
|
||||
}
|
||||
|
||||
.hero__banner h1 {
|
||||
width: 15ch;
|
||||
}
|
||||
|
||||
.banner-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
}
|
||||
|
||||
.banner-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.hero__info {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero__info .platform-list {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg path {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.btn--hero {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
background: var(--c-1);
|
||||
border-radius: 999px;
|
||||
padding: 1.5rem 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn--hero:hover {
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -32,55 +32,4 @@
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
|
||||
article.info__wrapper {
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper section {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info__wrapper p {
|
||||
font-family: Nunito, sans-serif;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.info__wrapper section p:first-of-type{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul li{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
line-height: 1;
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info__wrapper ul li::before {
|
||||
content: '';
|
||||
background: url('./assets/images/check.svg');
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: -2.3rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
</article>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ locale }}" dir="{{ dir }}">
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -77,26 +77,6 @@
|
|||
</h1>
|
||||
<!-- <div class="text-xl"><%= site.description %></div> -->
|
||||
</header>
|
||||
<!-- <div class="">
|
||||
header was here
|
||||
<nav>
|
||||
<ul class="flex flex-wrap text-xl">
|
||||
<li class="mr-6">
|
||||
<a class="text-gray-700 border-none hover:no-underline hover:text-gray-800" href="/"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a
|
||||
class="text-gray-700 border-none hover:no-underline hover:text-gray-800"
|
||||
href="https://github.com/ixartz/Eleventy-Starter-Boilerplate"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div> -->
|
||||
|
||||
<main class="page-content">
|
||||
<%- content %>
|
||||
|
|
@ -109,10 +89,17 @@
|
|||
<script>
|
||||
|
||||
window.onload = setScrollbarVariable;
|
||||
document.onload = setScrollbarVariable;
|
||||
window.onresize = setScrollbarVariable;
|
||||
|
||||
function setScrollbarVariable() {
|
||||
const scrollbarWidth = window.innerWidth - document.body.clientWidth;
|
||||
//alert(window.innerWidth + " - " + document.body.clientWidth);
|
||||
//const scrollbarWidth = window.innerWidth - document.body.clientWidth;
|
||||
|
||||
const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;
|
||||
|
||||
//console.log(screen.width + " " + window.innerWidth);
|
||||
const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
|
||||
document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
|
||||
}
|
||||
|
||||
|
|
@ -122,6 +109,7 @@
|
|||
<script src="/node_modules/@glidejs/glide/dist/glide.min.js"></script>
|
||||
<!-- <script src="/node_modules/@glidejs/glide/dist/glide.modular.esm.js"></script> -->
|
||||
<!-- <script src="/js/eleventy.js" type="module" async></script> -->
|
||||
<script src="/node_modules/blueimp-md5/js/md5.min.js"></script>
|
||||
|
||||
<script>
|
||||
// new Glide('.glide').mount({
|
||||
|
|
@ -135,6 +123,58 @@
|
|||
// new Glide('.glide').mount()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementById('fromEmail').addEventListener('input', function () {
|
||||
|
||||
const fromEmail = document.getElementById('fromEmail');
|
||||
const message = document.getElementById('message');
|
||||
const alert = document.getElementById('emailError');
|
||||
const contactSubmit = document.getElementById('contactSubmit');
|
||||
|
||||
if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
|
||||
contactSubmit.disabled = false;
|
||||
alert.classList.remove('form-alert--visible');
|
||||
} else {
|
||||
contactSubmit.disabled = true;
|
||||
alert.classList.add('form-alert--visible');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
document.getElementById('contactSubmit').addEventListener('click', function () {
|
||||
|
||||
const fromEmail = document.getElementById('fromEmail');
|
||||
const message = document.getElementById('message');
|
||||
const alert = document.getElementById('emailError');
|
||||
|
||||
var details = {
|
||||
'hash': md5(fromEmail.value + '89745378945667832'),
|
||||
'fromEmail': fromEmail.value,
|
||||
'message': message.value
|
||||
};
|
||||
|
||||
var formBody = [];
|
||||
for (var property in details) {
|
||||
var encodedKey = encodeURIComponent(property);
|
||||
var encodedValue = encodeURIComponent(details[property]);
|
||||
formBody.push(encodedKey + "=" + encodedValue);
|
||||
}
|
||||
formBody = formBody.join("&");
|
||||
|
||||
fetch('https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: formBody,
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
|
@ -143,14 +183,14 @@
|
|||
<style>
|
||||
.site-logo {
|
||||
height: 5rem;
|
||||
transform: rotateZ(4deg) translateY(0.4rem);
|
||||
transform: rotateZ(0deg) translateY(0.4rem);
|
||||
transition: 0.2s all;
|
||||
border: 3px solid var(--c-1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.site-logo:hover {
|
||||
transform: rotateZ(0deg) translateY(0.4rem);
|
||||
transform: rotateZ(4deg) translateY(0.4rem) scale(1.1);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
|
|
@ -183,5 +223,4 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
30
src/_includes/layouts/home.ejs
Normal file
30
src/_includes/layouts/home.ejs
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
layout: layouts/base.ejs
|
||||
---
|
||||
|
||||
<span>asdf</span>
|
||||
<%= 'hello' | i18n %>
|
||||
|
||||
<% include /hero %>
|
||||
|
||||
<% include /blurb %>
|
||||
|
||||
<div class="inset">
|
||||
|
||||
<% include /info %>
|
||||
|
||||
</div>
|
||||
|
||||
<% include /screenshots %>
|
||||
|
||||
<% include /systems %>
|
||||
|
||||
<div class="inset">
|
||||
|
||||
<% include /pricing %>
|
||||
|
||||
<% include /download %>
|
||||
|
||||
</div>
|
||||
|
||||
<% include /reviews %>
|
||||
|
|
@ -18,72 +18,4 @@
|
|||
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0"
|
||||
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nav__wrapper {
|
||||
border-radius: 0 0 var(--r-1) var(--r-1);
|
||||
padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
|
||||
background: var(--c-bkg);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
--weird-gap: 0.04rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
white-space: nowrap;
|
||||
font-family: Nunito, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: all 0.15s ease-out;
|
||||
color: black;
|
||||
}
|
||||
.nav-link:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--c-1);
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
}
|
||||
.nav-link:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -58,11 +58,18 @@
|
|||
|
||||
<% if (system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg></li>
|
||||
|
||||
<% } else if (system.status==='pro' ) { %>
|
||||
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg><span>(in-app purchase)</span></li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
|
|
@ -77,7 +84,7 @@
|
|||
download
|
||||
</a>
|
||||
</div>
|
||||
<div class="level__wrapper level__wrapper--disabled">
|
||||
<div class="level__wrapper level__wrapper--monthly level__wrapper--disabled">
|
||||
<header>
|
||||
<h2>
|
||||
monthly
|
||||
|
|
@ -100,7 +107,11 @@
|
|||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg>
|
||||
</li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
|
|
@ -115,7 +126,7 @@
|
|||
coming soon
|
||||
</a>
|
||||
</div>
|
||||
<div class="level__wrapper level__wrapper--disabled">
|
||||
<div class="level__wrapper level__wrapper--yearly level__wrapper--disabled">
|
||||
<header>
|
||||
<h2>
|
||||
yearly
|
||||
|
|
@ -138,7 +149,10 @@
|
|||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg></li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
|
|
@ -153,7 +167,7 @@
|
|||
coming soon
|
||||
</a>
|
||||
</div>
|
||||
<div class="level__wrapper">
|
||||
<div class="level__wrapper level__wrapper--lifetime">
|
||||
<header>
|
||||
<h2>
|
||||
lifetime
|
||||
|
|
@ -165,7 +179,7 @@
|
|||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
$39.95
|
||||
$24.95
|
||||
<span>
|
||||
one time fee
|
||||
</span>
|
||||
|
|
@ -176,7 +190,10 @@
|
|||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="3" stroke="#00C2FF" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg></li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
|
|
@ -192,136 +209,4 @@
|
|||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.pricing__content {
|
||||
display: grid;
|
||||
grid-template-columns: 0.75fr 1fr 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.level__wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto 2.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.level__wrapper--disabled {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.level__wrapper header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__wrapper header span {
|
||||
font-size: 0.75rem;
|
||||
color: white;
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper header h2 {
|
||||
color: var(--c-bkg);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__content {
|
||||
border-radius: var(--r-1);
|
||||
background: var(--c-bkg);
|
||||
padding: 2rem 0;
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto;
|
||||
}
|
||||
|
||||
.level__content ul {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(10, 3rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level__content li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
line-height: 1;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.level__content li span {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.level__price-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__price-wrapper h2 {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__price-wrapper span {
|
||||
font-size: 0.75rem;
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper .note {
|
||||
color: var(--c-bkg);
|
||||
}
|
||||
|
||||
.level-wrapper--heading .level__content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul {
|
||||
justify-items: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul li {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.level-wrapper--trial .level__content {
|
||||
background: #DBDBDB;
|
||||
}
|
||||
|
||||
.level__wrapper--trial .note {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.btn--level {
|
||||
text-align: center;
|
||||
background: orangered;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.btn--level:hover {
|
||||
background: var(--c-bkg);
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
.btn--disabled {
|
||||
background: var(--c-bkg);
|
||||
color: black;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
|
@ -33,68 +33,4 @@
|
|||
<% }) %>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
|
||||
/****** Style Star Rating Widget *****/
|
||||
|
||||
|
||||
.reviews-wrapper blockquote {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 3.4rem;
|
||||
line-height: .9;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
.rating-wrapper {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem
|
||||
}
|
||||
|
||||
.review {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.review__name {
|
||||
align-self: flex-end;
|
||||
margin-right: 6rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.review__name::before {
|
||||
content: '⁓ ';
|
||||
|
||||
}
|
||||
|
||||
.rating {
|
||||
border: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rating>label:before {
|
||||
margin: 0.3rem;
|
||||
font-size: 1.25em;
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
content: "\f005";
|
||||
}
|
||||
|
||||
.rating>.half:before {
|
||||
content: "\f089";
|
||||
position: absolute;
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
.rating>label {
|
||||
color: var(--c-1);
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
|
@ -22,47 +22,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.glide {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.glide::-webkit-scrollbar {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.glide::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.glide::-webkit-scrollbar-thumb {
|
||||
background-color: var(--c-1);
|
||||
border-radius: 999px;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.glide::-webkit-scrollbar-thumb:hover {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.glide__slides {
|
||||
display:flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.glide__slide img {
|
||||
max-width: 12rem;
|
||||
}
|
||||
|
||||
.glide__slide img {
|
||||
border-radius: 2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
|
@ -21,6 +21,8 @@
|
|||
<% }) %>
|
||||
</ul>
|
||||
<div class="system__zoom-wrapper">
|
||||
<img class="zoom__image--bkg %>"
|
||||
src="/assets/images/systems/layers/bkg.png" alt="background">
|
||||
<% systems.forEach((system, index)=> { %>
|
||||
<img class="zoom__image zoom__image--<%= system.slug %> <%= index === 0 ? 'zoom__image--visible' : '' %>"
|
||||
src="/assets/images/systems/layers/<%= system.slug %>.png" alt="<%= system.name %>"
|
||||
|
|
@ -63,88 +65,4 @@
|
|||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.system__wrapper section {
|
||||
display: grid;
|
||||
grid-template-columns: 30rem auto;
|
||||
}
|
||||
|
||||
.system__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.system__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.system__list li {
|
||||
aspect-ratio: 1;
|
||||
height: 9rem;
|
||||
background-color: var(--c-1);
|
||||
border-radius: var(--r-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0.3rem solid transparent;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system__list li:hover {
|
||||
border-color: orangered;
|
||||
}
|
||||
|
||||
.system__list li:hover img,
|
||||
.system__list li:hover span {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.system__list li img {
|
||||
width: 4rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.system__list li span {
|
||||
color: var(--c-bkg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.system__list li.system--selected {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.system__zoom-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--c-1);
|
||||
padding: var(--p-1);
|
||||
border-radius: var(--r-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li.system--soon {
|
||||
background: lightgray;
|
||||
color: gray;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zoom__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.zoom__image--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_51:52)">
|
||||
<path d="M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z" fill="white"/>
|
||||
<path d="M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z" fill="#00C2FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_51:52">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/hero.png
Normal file
BIN
src/assets/images/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 4 MiB After Width: | Height: | Size: 4 MiB |
|
Before Width: | Height: | Size: 277 KiB After Width: | Height: | Size: 277 KiB |
|
Before Width: | Height: | Size: 3.9 MiB After Width: | Height: | Size: 3.9 MiB |
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 259 KiB After Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
|
Before Width: | Height: | Size: 4.8 MiB After Width: | Height: | Size: 4.8 MiB |
|
Before Width: | Height: | Size: 356 KiB After Width: | Height: | Size: 356 KiB |
|
Before Width: | Height: | Size: 4.9 MiB After Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 361 KiB After Width: | Height: | Size: 361 KiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
|
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 4.4 MiB |
|
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 326 KiB |
|
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 4.4 MiB |
|
Before Width: | Height: | Size: 327 KiB After Width: | Height: | Size: 327 KiB |
|
Before Width: | Height: | Size: 3.6 MiB After Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 3.6 MiB After Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 153 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 187 KiB |
BIN
src/assets/images/slider-1.png
Normal file
BIN
src/assets/images/slider-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 968 KiB |
BIN
src/assets/images/slider-2.png
Normal file
BIN
src/assets/images/slider-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/systems/icons/lymphatic.png
Normal file
BIN
src/assets/images/systems/icons/lymphatic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/images/systems/icons/nervous.png
Normal file
BIN
src/assets/images/systems/icons/nervous.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/systems/layers/bkg.png
Normal file
BIN
src/assets/images/systems/layers/bkg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 315 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 760 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 739 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 76 KiB |
113
src/assets/styles/_blurb.css
Normal file
113
src/assets/styles/_blurb.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
article.blurb__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
.blurb__wrapper section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blurb__wrapper p {
|
||||
font-family: Nunito, sans-serif;
|
||||
font-size: max(1.5rem, 12pt);
|
||||
}
|
||||
|
||||
.blurb__wrapper p em {
|
||||
background-color: var(--c-3);
|
||||
padding: 0 .25em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.before-and-after {
|
||||
position: relative;
|
||||
height: 25rem;
|
||||
width: calc(25rem * (781/1347));
|
||||
aspect-ratio: 781/1347;
|
||||
border: 2px solid white;
|
||||
border-radius: var(--r-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.before-and-after .img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.before-and-after .slider {
|
||||
position: absolute;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(242, 242, 242, 0.3);
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.before-and-after .slider:hover {
|
||||
background: rgba(242, 242, 242, 0.1);
|
||||
}
|
||||
|
||||
.before-and-after .slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider::-moz-range-thumb {
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
left: calc(50% - 18px);
|
||||
top: calc(50% - 18px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:after {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:before {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
91
src/assets/styles/_contact.css
Normal file
91
src/assets/styles/_contact.css
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.contact__wrapper {
|
||||
display: flex;
|
||||
color: var(--c-bkg);
|
||||
background: var(--c-3);
|
||||
width: var(--viewportWidth);
|
||||
margin-top: 2rem;
|
||||
padding: 4rem 2rem 6rem 2rem;
|
||||
}
|
||||
|
||||
.contact__wrapper section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact__wrapper .form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem
|
||||
}
|
||||
|
||||
.contact__wrapper input {
|
||||
border-radius: max(1rem, 16pt);
|
||||
padding: 0.5rem 1rem;
|
||||
width: min(35ch, 90vw);
|
||||
font-size: max(1rem, 16pt);
|
||||
}
|
||||
|
||||
.contact__wrapper textarea {
|
||||
color: black;
|
||||
border-radius: max(1rem, 16pt);
|
||||
padding: 0.5rem 1rem;
|
||||
width: min(35ch, 90vw);
|
||||
min-height: 10rem;
|
||||
font-size: max(1rem, 16pt);
|
||||
}
|
||||
|
||||
.btn--contact {
|
||||
text-align: center;
|
||||
background: var(--c-2);
|
||||
color: white;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: max(1.5rem, 20pt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
transition: 0.2s all;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn--contact svg {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.btn--contact:hover svg {
|
||||
stroke: black;
|
||||
transition: 0.2s color, 0.2s 0.2s transform;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.btn--contact:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn--contact:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-alert {
|
||||
text-transform: uppercase;
|
||||
transition: 0.2s all;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
margin-top: -1rem;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.form-alert--visible {
|
||||
margin-top: 0;
|
||||
height: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
54
src/assets/styles/_download.css
Normal file
54
src/assets/styles/_download.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.btn--store {
|
||||
text-align: center;
|
||||
background: var(--c-3);
|
||||
padding: .5rem 1rem;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.download__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.platform__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--p-1);
|
||||
border-radius: var(--r-1);
|
||||
background-color: var(--c-bkg);
|
||||
gap: 1rem;
|
||||
border: 0.3rem solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.platform__wrapper:hover {
|
||||
border-color: var(--c-3);
|
||||
}
|
||||
|
||||
.platform__wrapper:hover .btn--store {
|
||||
background: var(--c-1);
|
||||
}
|
||||
|
||||
.platform__wrapper svg {
|
||||
max-width: 100%;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
.platform__wrapper h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.download__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
83
src/assets/styles/_footer.css
Normal file
83
src/assets/styles/_footer.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
footer {
|
||||
display: flex;
|
||||
color: var(--c-bkg);
|
||||
gap: 3rem;
|
||||
background: black;
|
||||
width: var(--viewportWidth);
|
||||
padding: 4rem 2rem 6rem 2rem;
|
||||
}
|
||||
|
||||
footer section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
footer h3 a {
|
||||
font-size: 2rem;
|
||||
color: var(--c-3);
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
footer h3 a:hover {
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
max-height: 8.5rem;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
||||
footer li {
|
||||
line-height: 1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
footer li.menu-item {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
footer li svg {
|
||||
max-height: 1.7rem;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
footer li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--c-bkg);
|
||||
gap: 0.5rem;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
footer li a:hover {
|
||||
color: var(--c-3);
|
||||
}
|
||||
|
||||
footer li a:hover svg {
|
||||
stroke: var(--c-3);
|
||||
}
|
||||
|
||||
.copywrite {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.credit {
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.credit a {
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
.credit a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
88
src/assets/styles/_hero.css
Normal file
88
src/assets/styles/_hero.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.hero__wrapper {
|
||||
--offset: 8rem;
|
||||
margin-bottom: var(--offset);
|
||||
padding: 0 2rem;
|
||||
--weird-gap: 0.04rem;
|
||||
z-index: 1; /* temp, to overlap slider */
|
||||
}
|
||||
|
||||
.hero__video {
|
||||
border-radius: var(--r-1);
|
||||
}
|
||||
|
||||
.hero__banner {
|
||||
background: var(--c-bkg);
|
||||
border-radius: var(--r-1) var(--r-1) 0 0;
|
||||
padding: var(--p-1);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--offset));
|
||||
left: 6rem;
|
||||
}
|
||||
|
||||
.hero__banner h1 {
|
||||
width: 15ch;
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
|
||||
.banner-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
}
|
||||
|
||||
.banner-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.hero__info {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero__info .platform-list {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg path {
|
||||
fill: var(--c-2);
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.btn--hero {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
background: var(--c-3);
|
||||
border-radius: 999px;
|
||||
padding: 1.5rem 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn--hero:hover {
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
|
||||
|
||||
.hero__wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
46
src/assets/styles/_info.css
Normal file
46
src/assets/styles/_info.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
article.info__wrapper {
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper section {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info__wrapper p {
|
||||
font-family: Nunito, sans-serif;
|
||||
font-size: max(1.15rem, 10pt);
|
||||
}
|
||||
|
||||
.info__wrapper section p:first-of-type{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul li{
|
||||
font-size: max(1.15rem, 12pt);
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
line-height: 1;
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info__wrapper ul li::before {
|
||||
content: '';
|
||||
background: url('../images/check.svg');
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: -2.3rem;
|
||||
}
|
||||
65
src/assets/styles/_nav.css
Normal file
65
src/assets/styles/_nav.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.nav__wrapper {
|
||||
border-radius: 0 0 var(--r-1) var(--r-1);
|
||||
padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
|
||||
background: var(--c-bkg);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
--weird-gap: 0.04rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
white-space: nowrap;
|
||||
font-family: Nunito, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: all 0.15s ease-out;
|
||||
color: black;
|
||||
}
|
||||
.nav-link:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--c-1);
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
}
|
||||
.nav-link:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
145
src/assets/styles/_pricing.css
Normal file
145
src/assets/styles/_pricing.css
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
.pricing__content {
|
||||
display: grid;
|
||||
grid-template-columns: 0.75fr 1fr 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.level__wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto 2.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.level__wrapper--disabled {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.level__wrapper header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__wrapper header span {
|
||||
font-size: max(0.75rem, 8pt);
|
||||
color: var(--c-2);
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper header h2 {
|
||||
color: var(--c-2);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__content {
|
||||
border-radius: var(--r-1);
|
||||
background: var(--c-bkg);
|
||||
padding: 2rem 0;
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto;
|
||||
}
|
||||
|
||||
.level__content ul {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(11, 3rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level__content li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
line-height: 1;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.level__content li svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.level__content li span {
|
||||
font-size: max(0.75rem, 8pt);
|
||||
}
|
||||
|
||||
.level__price-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__price-wrapper h2 {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__price-wrapper span {
|
||||
font-size: max(0.75rem, 8pt);
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper .note {
|
||||
color: var(--c-bkg);
|
||||
}
|
||||
|
||||
.level-wrapper--heading .level__content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul {
|
||||
justify-items: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul li {
|
||||
color: var(--c-2);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.level-wrapper--trial .level__content {
|
||||
background: #DBDBDB;
|
||||
}
|
||||
|
||||
.level__wrapper--trial .note {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.btn--level {
|
||||
text-align: center;
|
||||
background: var(--c-3);
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.btn--level:hover {
|
||||
background: var(--c-bkg);
|
||||
color: var(--c-2);
|
||||
}
|
||||
|
||||
.btn--disabled {
|
||||
background: var(--c-bkg);
|
||||
color: black;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.level__wrapper--monthly, .level__wrapper--yearly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricing__content {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
60
src/assets/styles/_reviews.css
Normal file
60
src/assets/styles/_reviews.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/****** Style Star Rating Widget *****/
|
||||
|
||||
|
||||
.reviews-wrapper blockquote {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 3.4rem;
|
||||
line-height: .9;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
.rating-wrapper {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem
|
||||
}
|
||||
|
||||
.review {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.review__name {
|
||||
align-self: flex-end;
|
||||
margin-right: 6rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.review__name::before {
|
||||
content: '⁓ ';
|
||||
|
||||
}
|
||||
|
||||
.rating {
|
||||
border: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rating>label:before {
|
||||
margin: 0.3rem;
|
||||
font-size: 1.25em;
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
content: "\f005";
|
||||
}
|
||||
|
||||
.rating>.half:before {
|
||||
content: "\f089";
|
||||
position: absolute;
|
||||
color: var(--c-3);
|
||||
}
|
||||
|
||||
.rating>label {
|
||||
color: var(--c-3);
|
||||
}
|
||||
40
src/assets/styles/_screenshots.css
Normal file
40
src/assets/styles/_screenshots.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.glide {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.glide::-webkit-scrollbar {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.glide::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.glide::-webkit-scrollbar-thumb {
|
||||
background-color: var(--c-1);
|
||||
border-radius: 999px;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.glide::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
.glide__slides {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.glide__slide img {
|
||||
max-width: 12rem;
|
||||
}
|
||||
|
||||
.glide__slide img {
|
||||
border-radius: 2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
103
src/assets/styles/_systems.css
Normal file
103
src/assets/styles/_systems.css
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
.system__wrapper section {
|
||||
display: grid;
|
||||
grid-template-columns: 30rem auto;
|
||||
}
|
||||
|
||||
.system__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.system__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.system__list li {
|
||||
aspect-ratio: 1;
|
||||
height: 9rem;
|
||||
width: 9rem;
|
||||
background-color: var(--c-1);
|
||||
border-radius: var(--r-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0.3rem solid transparent;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system__list li:hover {
|
||||
border-color: var(--c-3);
|
||||
}
|
||||
|
||||
.system__list li:hover img,
|
||||
.system__list li:hover span {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.system__list li img {
|
||||
width: 4rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.system__list li span {
|
||||
color: var(--c-bkg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.system__list li.system--selected {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
.system__zoom-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--c-1);
|
||||
padding: var(--p-1);
|
||||
border-radius: var(--r-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li.system--soon {
|
||||
background: lightgray;
|
||||
color: gray;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zoom__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.zoom__image--bkg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.5s;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.zoom__image--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.system__wrapper section {
|
||||
grid-template-columns: 20rem auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,11 +8,11 @@ a:hover {
|
|||
@apply underline;
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
/* @tailwind components; */
|
||||
|
||||
@tailwind utilities;
|
||||
/* @tailwind utilities; */
|
||||
|
||||
.content {
|
||||
/* .content {
|
||||
@apply tracking-wider leading-8 text-xl;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ a:hover {
|
|||
|
||||
.content th {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
} */
|
||||
|
||||
/*************************************/
|
||||
|
||||
|
|
@ -144,8 +144,10 @@ body{
|
|||
--r-1: 2rem;
|
||||
--p-1: 1.5rem;
|
||||
--c-bkg: white;
|
||||
--c-1: #00C2FF;
|
||||
/* --c-1: #00C2FF; */
|
||||
--c-1: #ececec;
|
||||
--c-2: black;
|
||||
--c-3: #00C2FF;
|
||||
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
||||
}
|
||||
|
||||
|
|
@ -169,12 +171,13 @@ article {
|
|||
|
||||
article > header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
article > header > aside {
|
||||
|
||||
font-size: max(1rem, 10pt)
|
||||
}
|
||||
|
||||
.inset {
|
||||
|
|
@ -223,11 +226,6 @@ h1 {
|
|||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
h1.h1--hero {
|
||||
font-size: 4.2rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Bebas Neue;
|
||||
font-size: 3rem;
|
||||
|
|
@ -235,14 +233,29 @@ h2 {
|
|||
line-height: 0.85;
|
||||
}
|
||||
|
||||
.hero__wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blurb__wrapper {
|
||||
border-radius: var(--radius);
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
}
|
||||
|
||||
@import '_nav.css';
|
||||
|
||||
@import '_hero.css';
|
||||
|
||||
@import '_blurb.css';
|
||||
|
||||
@import '_info.css';
|
||||
|
||||
@import '_screenshots.css';
|
||||
|
||||
@import '_systems.css';
|
||||
|
||||
@import '_pricing.css';
|
||||
|
||||
@import '_download.css';
|
||||
|
||||
@import '_reviews.css';
|
||||
|
||||
@import '_contact.css';
|
||||
|
||||
@import '_footer.css';
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
---
|
||||
layout: layouts/base.ejs
|
||||
---
|
||||
|
||||
hello
|
||||
layout: layouts/home.ejs
|
||||
---
|
||||
|
|
@ -31,4 +31,6 @@ eleventyComputed:
|
|||
|
||||
</div>
|
||||
|
||||
<% include /reviews %>
|
||||
<% include /reviews %>
|
||||
|
||||
<% include /contact %>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
permalink: js/eleventy.js
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
{% set js %}
|
||||
<!-- {% include "../../node_modules/@glidejs/glide/dist/glide.min.js" %} -->
|
||||
{% endset %}
|
||||
{{ js | jsmin | safe }}
|
||||
|
|
@ -87,6 +87,30 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'svg-url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
name: 'images/[name].[ext]',
|
||||
limit: 10000,
|
||||
esModule: false
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue