Resources requested by the new story could not be loaded. Snapshots may be affected.
Baseline History
Build 8185846b60d
Current build. There are unaccepted changes, so build 8137 is still the baseline.
Build 8137f719264 current baseline
Accepted by Hannah.
Build 81286812544
Accepted by Hannah.
Build 8086baf1bf4
Accepted by Yuichiro Tachibana (Tsuchiya).
Build 80753a7c5cf
Accepted by Hannah.
Commenting is disabled because there's a newer build on this branch
DOM Diff
file.html a
CHANGED
|
@@ -4,5 +4,22 @@
|
|
| 4 |
</script>
|
| 5 |
<section class="relative flex h-screen items-center justify-center overflow-hidden px-5 tablet:overflow-visible tablet:px-20">
|
| 6 |
<div aria-hidden="true" class="absolute left-1/2 top-1/2 -z-10 h-[220px] w-[440px] -translate-x-1/2 -translate-y-1/2 transform-gpu rounded-[50%] bg-purple-7 blur-[90px] laptop:h-[428px] laptop:w-[856px] laptop:blur-[220px]"></div>
|
| 7 |
<div class="relative flex flex-col gap-10">
|
| 8 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
</script>
|
| 5 |
<section class="relative flex h-screen items-center justify-center overflow-hidden px-5 tablet:overflow-visible tablet:px-20">
|
| 6 |
<div aria-hidden="true" class="absolute left-1/2 top-1/2 -z-10 h-[220px] w-[440px] -translate-x-1/2 -translate-y-1/2 transform-gpu rounded-[50%] bg-purple-7 blur-[90px] laptop:h-[428px] laptop:w-[856px] laptop:blur-[220px]"></div>
|
| 7 |
<div class="relative flex flex-col gap-10">
|
| 8 |
+
<h1 class="flex w-[90vw] justify-center px-10 drop-shadow-2xl tablet:w-screen">
|
| 9 |
+
<span data-copy="Create products that excite the world, together? Contact me here anytime."
|
| 10 |
+
class="relative inline-block max-w-[1200px] py-3 text-4xl font-bold leading-tight tablet:text-6xl tablet:leading-tight laptop:text-7xl laptop:leading-tight bg-gradient-to-br from-mauve-12 bg-clip-text text-transparent before:absolute before:inset-0 before:-z-10 before:h-full before:w-full before:py-3 before:text-dark-mauve-12 before:content-[attr(data-copy)] before:dark:text-light-mauve-12">Create products that excite the world, together?
|
| 11 |
+
<span class="text-purple-11">Contact me</span>here anytime.</span>
|
| 12 |
+
</h1>
|
| 13 |
+
<a target="_blank" rel="noopener noreferrer" role="button" tabindex="0"
|
| 14 |
+
class="inline-block self-stretch rounded-lg px-8 py-3 text-center transition bg-purple-3 text-purple-11 hover:bg-purple-4 text-lg tablet:text-2xl relative m-0.5 after:absolute after:-inset-0.5 after:z-[-1] after:rounded-lg after:bg-gradient-to-br after:from-pink-7 after:to-purple-7 after:content-[''] font-bold tablet:w-fit w-fit mx-auto"
|
| 15 |
+
href="mailto:me@shio.studio">Get in Touch</a>
|
| 16 |
+
<div aria-hidden="true">
|
| 17 |
+
<div class="absolute -top-6 right-0 -z-20 h-1 w-4/5 tablet:right-32 tablet:w-[980px] laptop:right-40 before:absolute before:-top-1/2 before:right-0 before:h-2 before:w-2 before:rounded-full before:bg-purple-7 before:content-[""]"
|
| 18 |
+
style="background-image: linear-gradient(to right, hsl(var(--twc-purple-7) / var(--twc-purple-7-opacity, 1)), hsl(var(--twc-purple-7) / var(--twc-purple-7-opacity, 1)) 8px, transparent 2px, transparent 8px); background-size: 18px 2px; background-position: center center; background-repeat: repeat-x;"></div>
|
| 19 |
+
<div class="absolute -top-24 right-5 -z-20 h-[calc(84svh)] max-h-[960px] w-1 tablet:-top-32 tablet:right-60 laptop:-top-40 laptop:right-72 before:absolute before:-left-1/2 before:top-0 before:h-2 before:w-2 before:rounded-full before:bg-purple-7 before:content-[""] after:absolute after:-left-1/2 after:bottom-0 after:h-2 after:w-2 after:rotate-45 after:border-b-2 after:border-r-2 after:border-purple-7"
|
| 20 |
+
style="background-image: linear-gradient(to bottom, hsl(var(--twc-purple-7) / var(--twc-purple-7-opacity, 1)), hsl(var(--twc-purple-7) / var(--twc-purple-7-opacity, 1)) 8px, transparent 2px, transparent 8px); background-size: 2px 18px; background-position: center center; background-repeat: repeat-y;"></div>
|
| 21 |
+
<div class="absolute -left-60 top-60 -z-20 h-[360px] w-[360px] rounded-full border-2 border-dashed border-purple-7 tablet:-left-80 tablet:top-52 tablet:h-[418px] tablet:w-[418px] laptop:-left-52 laptop:top-32"></div>
|
| 22 |
+
</div>
|
| 23 |
+
</div>
|
| 24 |
+
</section>
|
| 25 |
+
</div>
|