Dev HarryAdney

## media-queries.css

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS


## Parallax scrolling
***html***
<div class="wrapper">
  <div class="box box-back">
    <h3>SWEETIES</h3>
  </div>
  <div class="box box-front">
      <img src="https://cdn.pixabay.com/photo/2017/03/30/15/47/churros-2188871_960_720.jpg" />
  </div>
</div>

## Vertical align with flex
Vertical align with flex

***html***
parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100wh;
}

## responsive nav.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        @import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

## gulpfile.js
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');

const clean = require('gulp-rm');
// Use gulp-terser instead of gulp-uglifies
const uglify = require('gulp-terser');
const minify = require('gulp-clean-css');

## carousel-css-only
<style>
@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;

	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	//CSS
	*html*
	<div class="wrapper">
	<div class="box box-back">
	<h3>SWEETIES</h3>
	</div>
	<div class="box box-front">
	<img src="https://cdn.pixabay.com/photo/2017/03/30/15/47/churros-2188871_960_720.jpg" />
	</div>
	</div>
	Vertical align with flex

	*html*
	parent {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100wh;
	}
	const gulp = require('gulp');
	const browserSync = require('browser-sync').create();
	const sass = require('gulp-sass');
	const autoprefixer = require('gulp-autoprefixer');

	const clean = require('gulp-rm');
	// Use gulp-terser instead of gulp-uglifies
	const uglify = require('gulp-terser');
	const minify = require('gulp-clean-css');
	<style>
	@keyframes tonext {
	75% {
	left: 0;
	}
	95% {
	left: 100%;
	}
	98% {
	left: 100%;