Gabor Flamich wpflames

wpflames / index.html

Created August 31, 2020 15:10

Landing Page with CSS Animations Karate HTML

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Karate Landing Page</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 href="https://fonts.googleapis.com/css2?family=Lexend+Peta&display=swap" rel="stylesheet">
	</head>

wpflames / style.scss

Created August 31, 2020 15:11

Landing Page with CSS Animations Karate SCSS

	//VARIABLES

	$dark: #0d1113;
	$red: #f84443;

	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;

wpflames / script.js

Created September 3, 2020 10:11

Add "sticky" class to header when scrolling window - JS

	window.addEventListener("scroll", function(){
	var header = document.querySelector("header");
	header.classList.toggle("sticky", window.scrollY > 0);
	})

wpflames / index.html

Created September 5, 2020 07:01

Responsive Website with HTML / CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Complete Responsive Website Design</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 / style.scss

Created September 5, 2020 07:01

Responsive Website with HTML / CSS

	$dark: #0d1113;
	$blue: #3a86f9;
	$red: #f84443;

	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;

wpflames / script.js

Created September 5, 2020 07:03

Responsive Website with HTML / CSS

	window.addEventListener("scroll", function(){
	var header = document.querySelector("header");
	header.classList.toggle("sticky", window.scrollY > 0);
	})

	function toggle(){
	var header = document.querySelector('header');
	header.classList.toggle('active');
	}

wpflames / index.html

Created September 5, 2020 08:05

Responsive Website with Smooth Scroll Navigation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Smooth Scroll to ID - Responsive Landing Page</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 / style.scss

Last active September 25, 2020 11:26

Responsive Website with Smooth Scroll Navigation

	$dark: #0d1113;
	$red: linear-gradient(to right, #7a2629, #440b0c);

	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;
	}

wpflames / script.js

Created September 5, 2020 08:07

Responsive Website with Smooth Scroll Navigation

	function toggle(){
	var header = document.getElementById("header");
	header.classList.toggle('active');
	}

wpflames / script.js

Created September 9, 2020 06:36

JavaScript add class / remove class

	const sizes = document.querySelectorAll('.size');

	function changeSize(){
	sizes.forEach(size => size.classList.remove('active'));
	this.classList.add('active');
	}

	sizes.forEach(size => size.addEventListener('click', changeSize));