Code Snippets SCSS

Short texts SCSS 🧑‍💻 Code snippets SCSS ✍️ Reading lists SCSS 👀

Psychedelic waves

Looking at these waves for 1 minutewill bring you 56% more serenity* * According to a very serious and reliable study conducted by myself. my other codepens | epic.net Psychedelic waves —————– Exploring curl noise to make psychedelic backgrounds. A [Pen](https://codepen.io/Yakudoo/pen/rJjOJx) by [Karim Maaloul](https://codepen.io/Yakudoo) on [CodePen](https://codepen.io). [License](https://codepen.io/Yakudoo/pen/rJjOJx/license). class World { constructor(width, height) { this.renderer = […]

3D CSS

3D CSS —— A [Pen](https://codepen.io/anubis7k/pen/ZEJYdro) by [Erick Alves](https://codepen.io/anubis7k) on [CodePen](https://codepen.io). [License](https://codepen.io/anubis7k/pen/ZEJYdro/license). :root { –boxColor: #0ff7; –rotateSpeed: 30s; –bounceSpeed: 2s; } body { background-color: #000; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; font-size: 75px; perspective: 10em; perspective-origin: 50% calc(50% – 2em) } .scene { position: relative; transform-style: preserve-3d; animation: sceneRotate var(–rotateSpeed) infinite linear; […]

CollectionItem Component

import React from ‘react’; import ‘./styles.scss’; const CollectionItem = ({ name, price, imageUrl }) => ( {name} {price} ) export default CollectionItem; .collection-item { width: 22%; display: flex; flex-direction: column; height: 350px; align-items: center; .image { width: 100%; height: 95%; background-size: cover; background-position: center; margin-bottom: 5px; } .collection-footer{ width: 100%; height: 5%; display: flex; justify-content: […]

styles.module.scss

.messageListWrapper { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; > img { height: 28px; margin: 32px 0; } } .messageList { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 40px; flex: 1; .message { max-width: 440px; &:nth-child(2) { margin-left: 80px; } .messageContent { font-size: 20px; line-height: 28px; } .messageUser { margin-top: 16px; display: […]

Voyage Slider | GSAP

Highlands Scotland The mountains are calling Machu Pichu Peru Adventure is never far away Chamonix France Let your dreams come true Loading… console.clear(); const { gsap, imagesLoaded } = window; const buttons = { prev: document.querySelector(“.btn–left”), next: document.querySelector(“.btn–right”), }; const cardsContainerEl = document.querySelector(“.cards__wrapper”); const appBgContainerEl = document.querySelector(“.app__bg”); const cardInfosContainerEl = document.querySelector(“.info__wrapper”); buttons.next.addEventListener(“click”, () => swapCards(“right”)); […]