Skip to content

Instantly share code, notes, and snippets.

View HarryAdney's full-sized avatar
🎯
Focusing

Dev HarryAdney

🎯
Focusing
0 followers · 7 following
View GitHub Profile
@HarryAdney
HarryAdney / carousel-css-only
Last active January 16, 2020 15:27
Carousel made with css only
@HarryAdney
HarryAdney / responsive nav.html
Last active February 18, 2020 15:47
responsive-nav
<!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');
@HarryAdney
HarryAdney / Parallax scrolling
Last active February 22, 2020 11:39
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>
@HarryAdney
HarryAdney / Vertical align with flex
Last active February 22, 2020 11:41
Vertical align with flex
Vertical align with flex
***html***
parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100wh;
}
@HarryAdney
HarryAdney / htaccess boilerplate
Created February 22, 2020 11:59
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/
@HarryAdney
HarryAdney / index.html
Last active April 28, 2020 12:27
Accessible, css only navbar
<!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>
@HarryAdney
HarryAdney / media-queries.css
Last active May 5, 2020 09:56
media queries
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
@HarryAdney
HarryAdney / accessible-accordian.html
Last active May 11, 2020 10:36
accessible accordian
<!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 / accesible-mega-menu.md
Last active May 29, 2020 13:00
From http://terrillthompson.com/tests/menus/accessible-mega-menu/test.html, based on Adobe's mega menu 
<title>Accessible Mega Menu Test Page</title>

	<!-- styles for Terrill's test pages -->
@HarryAdney
HarryAdney / Accessible collapsible menu list.html
Last active October 2, 2020 17:27
Accessible collapsible menu list
<!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>