human-anatomy-3d/src/_includes/download.ejs
2021-11-03 20:48:28 +01:00

93 lines
No EOL
2.6 KiB
Text

<article class="download__wrapper max-w-screen-lg">
<header>
<h1 id="download">
download now
</h1>
</header>
<section class="download__content">
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
<% include /store-icons/ios.svg %>
<h2>
iOS
</h2>
<div class="btn btn--store">
go to store
</div>
</a>
<a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
<% include /store-icons/android.svg %>
<h2>
Android
</h2>
<div class="btn btn--store">
go to store
</div>
</a>
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
<% include /store-icons/macos.svg %>
<h2>
macOS
</h2>
<div class="btn btn--store">
go to store
</div>
</a>
<a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
<% include /store-icons/windows.svg %>
<h2>
Windows
</h2>
<div class="btn btn--store">
go to store
</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>