AlanSimpsonMe’s gists

AlanSimpsonMe / SideGalleryWithCaptions

Last active June 3, 2019 12:46

Thumbnail gallery with small images down the side, large image with caption text beneath it appears when user touches the mouse pointer to the smaller image.

	<!DOCTYPE html>
	<html>
	<head>
	<title>Thumbnail Gallery</title>
	<style type="text/css">
	/* Entire gallery */
	.gallery {
	position: relative;
	}

AlanSimpsonMe / ResponsiveFigures.html

Created May 19, 2019 20:38

Responsive captioned figures with figure, figcaption, and flexbox - HTML5 and CSS3

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="author" content="Alan Simpson" />
	<meta name="description"
	content="Responsive captioned pictures with figure, figcaption, and flexbox (HTML5 and CSS3)" <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>Responsive Figures</title>

AlanSimpsonMe / Python_3.7_nested_dictionaries_f-strings

Created November 26, 2018 14:13

Loop through nested Python 3.7 dictionaries and format output with f-strings.

	# Create a generic products dictionary to contain multiple product dictionaries.
	products = {
	'RB00111': {'name': 'Rayban Sunglasses', 'price': 112.98, 'models': ['black', 'tortoise']},
	'DWC0317': {'name': 'Drone with Camera', 'price': 72.95, 'models': ['white', 'black']},
	'MTS0540': {'name': 'T-Shirt', 'price': 2.95, 'models': ['small', 'medium', 'large']},
	'ECD2989': {'name': 'Echo Dot', 'price': 29.99, 'models': []}
	}
	# This header shows above the output.
	print(f"{'ID':<6} {' Name':<17} {'Price':>8} {' Models'}")
	print('-' * 60) # Prints 60 hyphens.

AlanSimpsonMe / YouTube_Markdown.txt

Created July 21, 2018 22:55

Markdown code for a YouTube video

[![ALT TEXT](https://img.youtube.com/vi/YOUTUBEID/0.jpg)](https://youtu.be/YOUTUBEID "TOOLTIP TEXT")

AlanSimpsonMe / Responsive_Google_Map

Created July 7, 2018 16:55

Embed a Responsive Google Map in a Web Page

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta name="author" content="Alan Simpson">
	<meta name="description" content="Embed a Responsive Google Map in your Web Page">

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

AlanSimpsonMe / Casually_Tossed_Photos

Last active September 2, 2022 12:33

Photos casually tossed on a table - HTML5 and CSS3

	<!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">
	<meta name="description" content="Photos casually tossed on a table - HTML5 and CSS3">
	<meta name="author" content="Alan Simpson">
	<title>Casually Tossed Photos</title>

AlanSimpsonMe / CSS_Modal_Popup

Created June 16, 2018 23:31

Pure CSS modal popup for web page

	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="Pure CSS modal popup. https://alansimpson.me/html_css/codequickies/">
	<meta name="author" content="Alan Simpson">
	<head>
	<style>
	/* The mask and also target of href= */

AlanSimpsonMe / Sliding_Nav_Drawer

Created June 9, 2018 18:33

HTML, CSS, JavaScript sliding nav drawer.

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Sliding Nav Drawer</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="Super simple pure HTML, CSS, JavaScript sliding nav bar with icons. https://alansimpson.me/html_css/codequickies/">
	<meta name="author" content="Alan Simpson">

AlanSimpsonMe / SuperSimpleSearch

Created June 3, 2018 00:16

Free and super simple code to let people search your website using Google Custom Search Engine

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta name="description" content = "Coding example for styling Google Custom Search Engine controls - https://AlanSimpson.me">
	<meta name="Author" content = "Alan Simpson">
	<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>Search My Site Code</title>

AlanSimpsonMe / JavaScript_Music_Player

Last active July 17, 2018 20:15

Super simple JavaScript music player with Play, Pause, and Volume controls.

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="A simple JavaScript music player with Play, Pause, and Volume controls, for JavaScript learners. Source at https://alansimpson.me/javascript/code_quickies/musicplayer">
	<meta name="author" contant="Alan Simpson">
	<title>Music Player</title>

	<!-- Just some basic styling, style yours to taste -->
	<style>
	table.player {

Alan Simpson AlanSimpsonMe