- Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time. -
-download now
+
+ download now
+
+
@@ -25,6 +33,8 @@
.hero__wrapper {
--offset: 8rem;
margin-bottom: var(--offset);
+ padding: 0 2rem;
+ --weird-gap: 0.04rem;
}
.hero__video {
@@ -37,7 +47,7 @@
padding: var(--p-1);
position: absolute;
bottom: calc(-1 * var(--offset));
- left: 4rem;
+ left: 6rem;
}
.hero__banner h1 {
@@ -46,18 +56,55 @@
.banner-edge-left {
position: absolute;
- left: calc(-1 * var(--r-1));
+ left: calc(-1 * var(--r-1) + var(--weird-gap));
height: var(--r-1);
width: var(--r-1);
- bottom: var(--offset);
+ bottom: calc(var(--offset) - var(--weird-gap));
}
.banner-edge-right {
position: absolute;
- right: calc(-1 * var(--r-1));
+ right: calc(-1 * var(--r-1) + var(--weird-gap));
height: var(--r-1);
width: var(--r-1);
- bottom: var(--offset);
+ 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);
+}
\ No newline at end of file
diff --git a/src/_includes/info.ejs b/src/_includes/info.ejs
index abefb22..f4e46e2 100644
--- a/src/_includes/info.ejs
+++ b/src/_includes/info.ejs
@@ -1,5 +1,5 @@
-
+ <% include /store-icons/ios.svg %>
+ <% include /store-icons/android.svg %>
+ <% include /store-icons/macos.svg %>
+ <% include /store-icons/windows.svg %>
+
+ Designed for anatomy students
@@ -36,9 +36,9 @@ \ No newline at end of file diff --git a/src/_includes/layouts/base.ejs b/src/_includes/layouts/base.ejs index 4900a0e..03dfe83 100644 --- a/src/_includes/layouts/base.ejs +++ b/src/_includes/layouts/base.ejs @@ -1,26 +1,30 @@ - - - - - - - - -
-
-->
+
+
-
- 
-
-
+
+
-
-
-
- <%= site.title %>
- -<%- content %>
+
+
- Made with ♥ by
- CreativeDesignsGuru
-
-
-
-
\ No newline at end of file
diff --git a/src/_includes/layouts/post.ejs b/src/_includes/layouts/post.ejs
index a8c6d74..247aaa0 100644
--- a/src/_includes/layouts/post.ejs
+++ b/src/_includes/layouts/post.ejs
@@ -4,7 +4,7 @@ layout: layouts/base.ejs
<%= title %>
+<%= site.title %>
<%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %>
diff --git a/src/_includes/nav.ejs b/src/_includes/nav.ejs
index e9b9fea..e00038d 100644
--- a/src/_includes/nav.ejs
+++ b/src/_includes/nav.ejs
@@ -3,7 +3,7 @@
-
<% sections.forEach((link)=> { %>
- - + <%= link.name %> @@ -27,6 +27,8 @@ background: var(--c-bkg); position: absolute; z-index: 1; + + --weird-gap: 0.04rem; } nav ul { @@ -37,23 +39,51 @@ 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)); + left: calc(-1 * var(--r-1) + var(--weird-gap)); height: var(--r-1); width: var(--r-1); - top: 0; + top: calc(-1 * var(--weird-gap)); transform: scaleY(-1); } .nav-edge-right { position: absolute; - right: calc(-1 * var(--r-1)); + right: calc(-1 * var(--r-1) + var(--weird-gap)); height: var(--r-1); width: var(--r-1); - top: 0; + 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); +} \ No newline at end of file diff --git a/src/_includes/pricing.ejs b/src/_includes/pricing.ejs index a5444f4..9d90169 100644 --- a/src/_includes/pricing.ejs +++ b/src/_includes/pricing.ejs @@ -1,23 +1,23 @@ -
- - <%= system.name %> + <%= system.name %> - <% }) %> + <% }) %>
- 2 systems included -
- purchase advanced systems separately -
- ✔ -
- ✔ -
- ✖(in-app purchase) -
- ✖(in-app purchase) -
- ✖(in-app purchase) -
- ✖(in-app purchase) -
- ✖(in-app purchase) + + <% systems.forEach((system)=> { %> + + <% if (system.status==='free' ) { %> + +
- ✔ + + <% } else if (system.status==='pro' ) { %> + +
- ✖(in-app purchase) + + <% } else if (system.status==='soon' ) { %> + +
- (coming soon) + + <% } %> + + <% }) %>
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ + <% systems.forEach((system)=> { %> + + <% if (system.status==='pro' || system.status==='free' ) { %> + +
- ✔ + + <% } else if (system.status==='soon' ) { %> + +
- (coming soon) + + <% } %> + + <% }) %>
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ + <% systems.forEach((system)=> { %> + + <% if (system.status==='pro' || system.status==='free' ) { %> + +
- ✔ + + <% } else if (system.status==='soon' ) { %> + +
- (coming soon) + + <% } %> + + <% }) %>
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ -
- ✔ + <% systems.forEach((system)=> { %> + + <% if (system.status==='pro' || system.status==='free' ) { %> + +
- ✔ + + <% } else if (system.status==='soon' ) { %> + +
- (coming soon) + + <% } %> + + <% }) %>
flexible pricing options
+
@@ -37,94 +37,116 @@
- download now
+ download
-
- + + + +
- - -- +
@@ -26,9 +26,9 @@-
<% systems.forEach((system)=> { %>
starter + + limited +
- - limited -free + + with paid add-ons +
- - purchase advanced systems separately --
-
+
coming soon
-
monthly + + subscription +
- - subscription -$9.95 -
paid monthly +-
-
+
@@ -135,32 +157,38 @@
- download now
+ download
@@ -175,52 +203,122 @@
.level__wrapper {
display: grid;
- grid-template-rows: 3rem auto auto;
+ 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 1rem;
+ display: grid;
+ grid-template-rows: 3rem auto;
}
- .level__price-wrapper h2 {
+ .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__wrapper span {
+.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: start;
+ align-items: center;
+ }
+
+ .level-wrapper--heading ul li {
+ color: black;
+ font-size: 1rem;
+ }
+
.level-wrapper--trial .level__content {
background: #DBDBDB;
}
-.btn--level {
- text-align: center;
- background: orangered;
- padding: .25rem 1rem;
- color: white;
- display: block;
- border-radius: 999px;
- text-transform: uppercase;
- font-size: 1rem;
-}
+ .level__wrapper--trial .note {
+ color: gray;
+ }
-.btn--disabled {
- background: var(--c-bkg);
- color: var(--c-1);
- opacity: 0.6;
- pointer-events: none;
- cursor: not-allowed;
-}
+ .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;
+ }
\ No newline at end of file
diff --git a/src/_includes/reviews.ejs b/src/_includes/reviews.ejs
index 1ecc078..ad94529 100644
--- a/src/_includes/reviews.ejs
+++ b/src/_includes/reviews.ejs
@@ -42,7 +42,7 @@
.reviews-wrapper blockquote {
font-family: 'DM Serif Display', serif;
- font-size: 59px;
+ font-size: 3.4rem;
line-height: .9;
margin: 0 2rem;
}
@@ -64,9 +64,16 @@
flex-direction: column;
}
- .review__name {
- align-self: flex-end;
- }
+.review__name {
+ align-self: flex-end;
+ margin-right: 6rem;
+ font-size: 1.5rem;
+}
+
+.review__name::before {
+ content: '⁓ ';
+
+}
.rating {
border: none;
@@ -74,7 +81,7 @@
}
.rating>label:before {
- margin: 5px;
+ margin: 0.3rem;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
diff --git a/src/_includes/screenshots.ejs b/src/_includes/screenshots.ejs
index db09a3e..05e4d1c 100644
--- a/src/_includes/screenshots.ejs
+++ b/src/_includes/screenshots.ejs
@@ -1,322 +1,33 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/_includes/systems.ejs b/src/_includes/systems.ejs
index 54a563c..0161e9a 100644
--- a/src/_includes/systems.ejs
+++ b/src/_includes/systems.ejs
@@ -1,6 +1,6 @@
-
+
yearly + + subscription +
- - subscription -$3.95 -
paid monthly +-
-
lifetime + + +
- - -$39.95 -
one time fee +-
-
- Hi-res imagery everywhere you need it -
- -
-
-
-