Skip to content

Instantly share code, notes, and snippets.

@SecretRecipe

SecretRecipe/3d-grid-pure-css.markdown

Created November 4, 2024 01:04
Show Gist options
  • Save SecretRecipe/593f167aeda1e14cf68b86c760748da2 to your computer and use it in GitHub Desktop.
Save SecretRecipe/593f167aeda1e14cf68b86c760748da2 to your computer and use it in GitHub Desktop.
Download ZIP
3D Grid Pure CSS
Raw
3d-grid-pure-css.markdown
Raw
index.html
<!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>
Raw
style.css
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment