Skip to content

Instantly share code, notes, and snippets.

View wpflames's full-sized avatar

Gabor Flamich wpflames

0 followers · 1 following
View GitHub Profile
@wpflames
wpflames / Cards with Neumorphism and Hover Effect – SCSS
Created August 28, 2020 16:34
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
@wpflames
wpflames / index.html
Created August 28, 2020 16:47
Masonry Grid Layout with CSS - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Grid CSS</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
@wpflames
wpflames / style.scss
Created August 28, 2020 16:49
Masonry Grid Layout with CSS - SCSS
$grey: #0d1113;
$red: #f84443;
$blue: linear-gradient(to right, #0083B0, #00B4DB);
$orange: #f24513;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
@wpflames
wpflames / index.html
Last active August 29, 2020 16:16
Card UI Design with CSS Flexbox - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Cards</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
</head>
<body>
@wpflames
wpflames / style.scss
Created August 29, 2020 16:16
Card UI Design with CSS Flexbox - SCSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
display: flex;
@wpflames
wpflames / index.html
Created August 29, 2020 16:28
Responsive Grid Layout UI Design HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
</head>
<body>
@wpflames
wpflames / style.scss
Created August 29, 2020 16:30
Responsive Grid Layout UI Design - SCSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
@wpflames
wpflames / index.html
Created August 29, 2020 17:07
Button with Direction Aware Hover Effect - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direction Aware Button Ripple Effects</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet">
</head>
<body>
@wpflames
wpflames / style.scss
Created August 29, 2020 17:09
Button with Direction Aware Hover Effect - SCSS
$primary: #040d15;
$secondary: linear-gradient(to right, #61045F, #AA076B);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
@wpflames
wpflames / script.js
Created August 29, 2020 17:10
Button with Direction Aware Hover Effect - JS
const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
btn.addEventListener('mouseenter', function(e){
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripples = document.createElement('span');
ripples.style.left = x + 'px';
ripples.style.top = y + 'px';
this.appendChild(ripples);