mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-06 12:57:48 +00:00
cards rotate
This commit is contained in:
tglide
@@ -355,7 +355,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (min-width: 1400px) {
|
||||
#products {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,200 +1,202 @@
|
||||
<script>
|
||||
import { objectKeys } from '$lib/utils/object';
|
||||
import { infos } from './Products.svelte';
|
||||
import { objectKeys } from '$lib/utils/object';
|
||||
import { infos } from './Products.svelte';
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<span class="aw-badges aw-eyebrow">Products_</span>
|
||||
<span class="aw-badges aw-eyebrow">Products_</span>
|
||||
|
||||
<h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16">
|
||||
Your backend, minus the hassle
|
||||
</h2>
|
||||
<h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16">
|
||||
Your backend, minus the hassle
|
||||
</h2>
|
||||
|
||||
<p class="aw-description u-margin-block-start-16">
|
||||
Build secure and scalable applications with less code. Add authentication, databases, storage, and more using Appwrite's development platform.
|
||||
</p>
|
||||
<p class="aw-description u-margin-block-start-16">
|
||||
Build secure and scalable applications with less code. Add authentication, databases,
|
||||
storage, and more using Appwrite's development platform.
|
||||
</p>
|
||||
|
||||
<div class="infos">
|
||||
{#each objectKeys(infos) as prod}
|
||||
{@const info = infos[prod]}
|
||||
<div class="infos">
|
||||
{#each objectKeys(infos) as prod}
|
||||
{@const info = infos[prod]}
|
||||
|
||||
{#if info}
|
||||
<div class="info">
|
||||
<h3>
|
||||
<img src={info.icon.active} alt="" />
|
||||
<span class="aw-label aw-u-color-text-primary">{info.title}</span>
|
||||
</h3>
|
||||
{#if info}
|
||||
<div class="info">
|
||||
<h3>
|
||||
<img src={info.icon.active} alt="" />
|
||||
<span class="aw-label aw-u-color-text-primary">{info.title}</span>
|
||||
</h3>
|
||||
|
||||
<h4 class="aw-title">{info.subtitle}</h4>
|
||||
<p>
|
||||
{info.description}
|
||||
</p>
|
||||
<ul class="features">
|
||||
{#each info.features as feature}
|
||||
<li>{feature}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<h4 class="aw-title">{info.subtitle}</h4>
|
||||
<p>
|
||||
{info.description}
|
||||
</p>
|
||||
<ul class="features">
|
||||
{#each info.features as feature}
|
||||
<li>{feature}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
{#if info.shot}
|
||||
<img src={info.shot} alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if info.shot}
|
||||
<img src={info.shot} alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="post-wrapper">
|
||||
<img src="/images/products/post.png" alt="" />
|
||||
<div class="img-overlay" />
|
||||
<div class="post-wrapper">
|
||||
<img src="/images/products/post.png" alt="" />
|
||||
<div class="img-overlay" />
|
||||
|
||||
<h2>See your products grow</h2>
|
||||
<p>
|
||||
Keep track of your projects progress on the Appwrite Console and see them grow into products users love and use every day.
|
||||
</p>
|
||||
</div>
|
||||
<h2>See your products grow</h2>
|
||||
<p>
|
||||
Keep track of your projects progress on the Appwrite Console and see them grow into
|
||||
products users love and use every day.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
display: none;
|
||||
padding-block-start: 5rem;
|
||||
padding-inline: 1.25rem;
|
||||
.wrapper {
|
||||
display: none;
|
||||
padding-block-start: 5rem;
|
||||
padding-inline: 1.25rem;
|
||||
|
||||
max-width: 800px;
|
||||
margin-inline: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
max-width: 800px;
|
||||
margin-inline: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 1439px) {
|
||||
.wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
.wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.infos {
|
||||
margin-block-start: 3rem;
|
||||
.infos {
|
||||
margin-block-start: 3rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rem;
|
||||
|
||||
.info {
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.info {
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
.aw-label {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
.aw-label {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: hsl(var(--aw-color-primary));
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
h4 {
|
||||
color: hsl(var(--aw-color-primary));
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
p {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-block-start: 2rem;
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
li {
|
||||
--marker-size: 1.25rem;
|
||||
--margin-left: calc(var(--marker-size) + 0.75rem);
|
||||
position: relative;
|
||||
margin-inline-start: var(--margin-left);
|
||||
li {
|
||||
--marker-size: 1.25rem;
|
||||
--margin-left: calc(var(--marker-size) + 0.75rem);
|
||||
position: relative;
|
||||
margin-inline-start: var(--margin-left);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
left: calc(var(--margin-left) * -1);
|
||||
top: 50%;
|
||||
width: var(--marker-size);
|
||||
height: var(--marker-size);
|
||||
left: calc(var(--margin-left) * -1);
|
||||
top: 50%;
|
||||
width: var(--marker-size);
|
||||
height: var(--marker-size);
|
||||
|
||||
transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
background: url('/images/icons/colored/check.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
background: url('/images/icons/colored/check.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
margin-block-start: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
margin-block-start: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
.post-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
padding-block-start: 35rem;
|
||||
padding-block-end: 5rem;
|
||||
padding-block-start: 35rem;
|
||||
padding-block-end: 5rem;
|
||||
|
||||
.img-overlay {
|
||||
content: '';
|
||||
background: linear-gradient(to top, black, transparent);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 30rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.img-overlay {
|
||||
content: '';
|
||||
background: linear-gradient(to top, black, transparent);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 30rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-block-size: unset;
|
||||
max-inline-size: 100%;
|
||||
top: 0rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 37.5rem;
|
||||
img {
|
||||
display: block;
|
||||
max-block-size: unset;
|
||||
max-inline-size: 100%;
|
||||
top: 0rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 37.5rem;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--greyscale-50, #ededf0);
|
||||
text-align: center;
|
||||
h2 {
|
||||
color: var(--greyscale-50, #ededf0);
|
||||
text-align: center;
|
||||
|
||||
/* Responsive/Display */
|
||||
font-family: Aeonik Pro;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 50px; /* 104.167% */
|
||||
letter-spacing: -0.48px;
|
||||
max-width: 20rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
/* Responsive/Display */
|
||||
font-family: Aeonik Pro;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 50px; /* 104.167% */
|
||||
letter-spacing: -0.48px;
|
||||
max-width: 20rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--greyscale-400, #97979b);
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 22px; /* 137.5% */
|
||||
letter-spacing: -0.072px;
|
||||
margin-block-start: 1rem;
|
||||
max-width: 20rem;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: var(--greyscale-400, #97979b);
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 22px; /* 137.5% */
|
||||
letter-spacing: -0.072px;
|
||||
margin-block-start: 1rem;
|
||||
max-width: 20rem;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -595,14 +595,14 @@
|
||||
Discover Appwrite's community across platforms and join the fun.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="aw-multi-columns-1">
|
||||
<ul class="aw-multi-columns-1" style:--p-col-gap="-1rem">
|
||||
<li>
|
||||
<a
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
|
||||
style="--card-padding:2rem"
|
||||
style="--card-padding:2rem;rotate: 6deg"
|
||||
>
|
||||
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
||||
<span
|
||||
@@ -622,7 +622,7 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
|
||||
style="--card-padding:2rem"
|
||||
style="--card-padding:2rem; rotate: 2deg"
|
||||
>
|
||||
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
||||
<span
|
||||
@@ -642,7 +642,7 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
|
||||
style="--card-padding:2rem"
|
||||
style="--card-padding:2rem; rotate: -10deg"
|
||||
>
|
||||
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
||||
<span
|
||||
@@ -662,7 +662,7 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical"
|
||||
style="--card-padding:2rem"
|
||||
style="--card-padding:2rem; rotate: -6deg"
|
||||
>
|
||||
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
||||
<span
|
||||
@@ -752,4 +752,16 @@
|
||||
left: -200px;
|
||||
bottom: -300px;
|
||||
}
|
||||
|
||||
.aw-multi-columns-1 {
|
||||
.aw-card {
|
||||
border: 1px solid hsl(var(--aw-color-offset));
|
||||
}
|
||||
@media (max-width: 1235px) {
|
||||
--p-col-gap: 2rem !important;
|
||||
.aw-card {
|
||||
rotate: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use '../abstract' as *;
|
||||
|
||||
.#{$p}-multi-columns-1 {
|
||||
column-width:pxToRem(340); column-gap:pxToRem(32);
|
||||
> * { break-inside:avoid; margin-block-end:pxToRem(32); }
|
||||
--p-col-gap: #{pxToRem(32)};
|
||||
column-width:pxToRem(340); column-gap:var(--p-col-gap);
|
||||
> * { break-inside:avoid; margin-block-end:var(--p-col-gap); }
|
||||
}
|
||||
Reference in New Issue
Block a user