Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

HarryAdney

🎯
Focusing
View GitHub Profile
View accesible-mega-menu.md
<title>Accessible Mega Menu Test Page</title>

	<!-- styles for Terrill's test pages --> 
<link rel="stylesheet" href="http://terrillthompson.com/tests/styles/tests.css" type="text/css">
View accessible-accordian.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html">
<title>Accessible accordian</title>
<style>
.Accordion {
@HarryAdney
HarryAdney / index.html
Last active Apr 28, 2020
Accessible, css only navbar
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible, css only navbar</title>
</head>
<body tabindex="-1">
<header>
<h1>Steph's Sweet Shoppe</h1>
View Accessible collapsible menu list.html
<!DOCTYPE html>
<html lang="en">
<head>
<!- https://www.w3.org/TR/2018/NOTE-wai-aria-practices-1.1-20180726/examples/listbox/listbox-collapsible.html -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible, collapsible menu list</title>
</head>
<body>
@HarryAdney
HarryAdney / accessible-navigation.html
Last active May 21, 2020
accessible navigation example
View accessible-navigation.html
<!-- examples.anysurfer.be/dropdown/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Dropdown Menu with Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@HarryAdney
HarryAdney / flexbox-nav
Last active May 21, 2020
Accessible navigation using Flexbox
View flexbox-nav
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
View 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-uglifyes
const uglify = require('gulp-terser');
const minify = require('gulp-clean-css');
View htaccess boilerplate
#301 Redirects for .htaccess
#Redirect a single page:
Redirect 301 /pagename.php http://www.domain.com/pagename.html
#Redirect an entire site:
Redirect 301 / http://www.domain.com/
#Redirect an entire site to a sub folder
Redirect 301 / http://www.domain.com/subfolder/
View media-queries.css
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
@HarryAdney
HarryAdney / Parallax scrolling
Last active Feb 22, 2020
Parallax scrolling
View 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>
You can’t perform that action at this time.