Skip to content

Instantly share code, notes, and snippets.

View AlanSimpsonMe's full-sized avatar

Alan Simpson AlanSimpsonMe

61 followers · 0 following
View GitHub Profile
@AlanSimpsonMe
AlanSimpsonMe / 07tm2stylesheet.css
Created December 12, 2017 14:33
Intermediate CSS3 and HTML5 Lesson 7
/* styles.css */
/* Downloadable Font from FontSquirrel */
@font-face {
font-family: 'Calligraffiti';
src: url('Calligraffiti-webfont.eot');
src: url('Calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
url('Calligraffiti-webfont.woff') format('woff'),
url('Calligraffiti-webfont.ttf') format('truetype'),
url('Calligraffiti-webfont.svg#CalligraffitiRegular') format('svg');
font-weight: normal;
@AlanSimpsonMe
AlanSimpsonMe / Super Simple Flexbox Responsive
Last active January 19, 2018 14:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Generic styling (all screen widths) */
* {
@AlanSimpsonMe
AlanSimpsonMe / CollapsiblePanels
Created February 20, 2018 16:55
Collapsible Panels
<!DOCTYPE html>
<html>
<head>
<title>Collapsible Panel</title>
<!-- Use this code however you like. I am at http://AlanSimpson.me- ->
<!-- Load jQuery library (simplifies the JavaScript coding later)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//jQuery code.
$(document).ready(function () {
@AlanSimpsonMe
AlanSimpsonMe / ClickableDropDown
Last active April 23, 2018 14:48
Clickable Dropdown Menus
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dropdowns </title>
<meta name="description" content="Here is a free and relatively simple clickable dropdown menu for your website that acts more like the menu bars in standard Windows and Mac OS apps, rather than CSS hover menus." />
<meta name="author" content="Alan Simpson" />
<!-- Download jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
@AlanSimpsonMe
AlanSimpsonMe / CrazySpinnyThing
Created February 20, 2018 18:52
Crazy Spinny Thing
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
/* General style, transition occurs when taking mouse pointer of the item */
img.crazy {
display: block;
margin: 10em auto;
/* That code is really just the opposite of the hover code. */
@AlanSimpsonMe
AlanSimpsonMe / DropCap
Created February 20, 2018 19:07
Super Simple CSS Drop Cap
<!DOCTYPE html>
<html>
<head>
<title>Drop Cap Example</title>
<!-- Feel free to use however you wish http://AlanSimpson.me -->
<style>
/* This width is just to make the paragraphs narrow, not required in real life */
p {
width: 400px;
}
@AlanSimpsonMe
AlanSimpsonMe / CSS Dropdown Menu
Last active December 15, 2021 17:57
Super Simple CSS Dropdown Menu
<!DOCTYPE html>
<html>
<head>
<title>Clean, Simple CSS Drop-Down Menu</title>
<meta name="description" content="Clean, simple CSS3 dropdown menu." />
<meta name="author" content="Alan Simpson" />
<style>
/* Probably about the cleanest, simplest CSS-only drop-down menu you'll find. */
/* To make older browser HTML5 aware (optional, probably not needed anymore) */
nav{
@AlanSimpsonMe
AlanSimpsonMe / SimpleNavigation
Last active April 11, 2018 13:02
Simple Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Nav</title>
<!-- This is just for the font, and is optional. I'm using a Google Font -->
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<style>
#wrapper {
width: 80%;
@AlanSimpsonMe
AlanSimpsonMe / Play_Sound_On_Click
Created February 20, 2018 20:40
Make sound on mouse click
<!DOCTYPE html>
<html>
<head>
<title>Play Sound on Click</title>
<meta name="author" content="Alan Simpson - AlanSimpson.me">
<!-- Get jQuery library from Google cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
var audioElement = document.createElement('audio');
@AlanSimpsonMe
AlanSimpsonMe / Play_Sound_On_Click
Last active October 4, 2018 12:24
Make sound on mouse click
<!DOCTYPE html>
<html>
<head>
<title>Play Sound on Click</title>
<meta name="author" content="Alan Simpson - AlanSimpson.me">
<!-- Get jQuery library from Google cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
var audioElement = document.createElement('audio');