SecretRecipe · November 4, 2024 01:04 · Nov 4, 2024
diff --git a/3d-grid-pure-css.markdown b/3d-grid-pure-css.markdown
@@ -0,0 +1,9 @@
+3D Grid Pure CSS
+----------------
+Pure CSS 3D Grid built by Kevin Powell, imported here by me. Take a look at his video, if you're interested how to build this, or inspect the repo:
+- https://www.youtube.com/watch?v=yuzggllFaC0&ab_channel=KevinPowell
+- https://github.com/kevin-powell/3d-grid-clone
+
+A [Pen](https://codepen.io/t-damer/pen/YzrdyqJ) by [Daniel](https://codepen.io/t-damer) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/YzrdyqJ).
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Copied layout for Caleb</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <main>
+    <section>
+      <div class="container">
+        <div class="feature-grid-container grid grid--columns">
+          <div class="feature-grid-text">
+            <h2 class="fs-700 uppercase text-compressed">WITH BLOCKCHAIN, TRADING WILL <span class="text-primary">NEVER</span>
+              HAVE TO
+              REMAIN CENTRALIZED</h2>
+            <p>Blockchain develops tooling by graphing the DeFi space to build <strong>game changing</strong> products to
+              benefit
+              users</p>
+            <div class="flex large-gap">
+              <a href="#" class="btn btn--primary uppercase text-primary">Whitepaper</a>
+              <a href="#" class="btn btn--accent uppercase text-primary">Watch video</a>
+            </div>
+          </div>
+          <div class="grid feature-grid">
+            <a href="#" aria-label="Low fees"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Fees.png" alt=""></a>
+            <a href="#" aria-label="DLO-Brick"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Brick.png" alt=""></a>
+            <a href="#" aria-label="Safe and simple"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Safe.png" alt=""></a>
+            <a href="#" aria-label="Synthetic curve"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Sythetic.png" alt=""></a>
+            <a href="#" aria-label="Anti slippage"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Anti.png" alt=""></a>
+            <a href="#" aria-label="Dex liquidity oracle"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/DLO.png" alt=""></a>
+            <a href="#" aria-label="Liquidity difference force multiplier"><img src="https://raw.githubusercontent.com/kevin-powell/3d-grid-clone/main/images/Force.png" alt=""></a>
+          </div>
+
+        </div>
+    </section>
+  </main>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,194 @@
+:root {
+  --clr-primary: #fc307b;
+  --clr-accent: #2c92ef;
+
+  --fs-700: 3.5rem;
+  --fs-400: 1.25rem;
+}
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+body {
+  background: black;
+  font-size: var(--fs-400);
+  color: white;
+  padding: 1vw 0;
+  font-family: sans-serif;
+  overflow-x: hidden;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.text-primary {
+  color: var(--clr-primary);
+}
+
+.text-accent {
+  color: var(--clr-secondary);
+}
+
+.fs-700 {
+  font-size: var(--fs-700);
+  line-height: 1;
+}
+
+.bg-primary {
+  background-color: var(--clr-primary);
+}
+
+.bg-accent {
+  background-color: var(--clr-accent);
+}
+
+.container {
+  padding: 0rem;
+  max-width: 75rem;
+  margin: 0 auto;
+}
+
+.flex {
+  display: flex;
+  gap: var(--gap, 1rem);
+}
+
+.grid {
+  display: grid;
+  gap: var(--gap, 1rem);
+}
+
+.grid--columns {
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+
+/* featured grid */
+
+.feature-grid-container {
+  perspective: 100rem;
+  position: relative;
+}
+
+.feature-grid-text {
+  padding: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(255 50% 0% / 0.8) 75%,
+    hsl(255 50% 50% / 0)
+  );
+}
+
+.feature-grid {
+  position: relative;
+  z-index: -1;
+  left: min(calc(1000px - 100vw) * -1, 0px);
+  width: 55rem;
+  align-self: center;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  transform-origin: left;
+  transform: rotateY(-40deg);
+}
+
+.feature-grid > a {
+  border-radius: 0.75em;
+  transition: transform 350ms ease-in-out;
+  overflow: hidden;
+}
+
+.feature-grid > a:hover,
+.feature-grid > a:focus-visible {
+  transform: scale(1.1);
+  box-shadow: 0 0 1.5rem hsl(0 0% 100% / 0.8);
+}
+
+.feature-grid > :nth-child(1),
+.feature-grid > :nth-child(4),
+.feature-grid > :nth-child(5),
+.feature-grid > :nth-child(7) {
+  grid-row: span 3;
+}
+
+.feature-grid > :nth-child(2),
+.feature-grid > :nth-child(3) {
+  grid-row: span 2;
+}
+
+.feature-grid > :nth-child(6) {
+  grid-column: 2 / span 2;
+  grid-row: 3 / span 4;
+}