Skip to content

Instantly share code, notes, and snippets.

@wpflames
wpflames / index.html
Last active August 28, 2020 15:45
Landing Page with GSAP Animations - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Animations - Seychelles</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 28, 2020 15:47
Landing Page with GSAP Animations - SCSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.slider{
position: absolute;
top: 0;
@wpflames
wpflames / script.js
Created August 28, 2020 15:48
Landing Page with GSAP Animations - JS
const hero = document.querySelector('.hero');
const slider = document.querySelector('.slider');
const logo = document.querySelector('#logo');
const hamburger = document.querySelector('.hamburger');
const headline = document.querySelector('.headline');
const cta = document.querySelector('.cta');
const numwrapper = document.querySelector('.num-wrapper');
var tl = gsap.timeline();
@wpflames
wpflames / index.html
Created August 28, 2020 16:06
Cards with Skewed Edge and 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>CSS Creative Box Border Hover 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 28, 2020 16:08
Cards with Skewed Edge and Hover Effect - SCSS
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
@wpflames
wpflames / index.html
Created August 28, 2020 16:20
Cards Hover Animation with CSS Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Box Model Using CSS Flexbox</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 28, 2020 16:21
Cards Hover Animation with CSS Flexbox - 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 28, 2020 16:28
Cards with CSS Animation 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>Card Hover 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 28, 2020 16:29
Cards with CSS Animation Hover Effect - SCSS
$moonlight: linear-gradient(to right, #2C5364, #203A43, #0F2027);
$grey: #0d1113;
$blue: #1779ff;
$red: #f84443;
$light: rgba(255,255,255,.05);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
@wpflames
wpflames / index.html
Created August 28, 2020 16:33
Cards with Neumorphism and Hover Effect – CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphism</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>