Ellyria · June 14, 2020 13:37
diff --git a/HTML5 Skeleton - Responsive.html b/HTML5 Skeleton - Responsive.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<!-- ================================================== -->
 		<title>HTML5 Skeleton</title>
 		<!-- ================================================== -->
 		<meta charset="utf-8" />
 		<!-- ================================================== -->
 		<!-- Optional support for older (IE9 or older) Microsoft browsers: -->
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<!-- ================================================== -->
 		<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale and disable zooming on mobile devices: -->
 		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
 		<!-- ================================================== -->
 		<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale: -->
 		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 /> -->
 		<!-- ================================================== -->
 		<!-- Automatically scale contents to viewport size and orientation: -->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<!-- ================================================== -->
 		<style>
 			*, *:before, *:after {
 				box-sizing: inherit;
 				}
 			abbr,acronym {/*CSS RESET*/
 				border:0;
 				}
 			address,caption,cite,code,dfn {/*CSS RESET*/
 				font-style:normal;
 				font-weight:normal;
 				}
 			article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {/*BACKWARD COMPATIBILITY*/
 				display: block;
 				}
 			blockquote,body,div,h1,h2,h3,h4,h5,h6,html,li,ol,p,ul {/*CSS RESET*/
 				margin:0;
 				padding:0;
 				}
 			html {
 				box-sizing: border-box;
 				}
 			unknown-element-name {/*UNKNOWN ELEMENT*/
 				display: block;
 				}
 			/*** PHONES OR SMALLER ************************************/
 			@media only screen and (max-width: 599px) {
 				body {
 					background-color: yellow;
 					}
 				}
 			/*** PORTRAIT TABLET **************************************/
 			@media only screen and (min-width: 600px) {
 				body {
 					background-color: green;
 					}
 				}
 			/*** LANDSCAPE TABLET *************************************/
 			@media only screen and (min-width: 900px) {
 				body {
 					background-color: orange;
 					}
 				}
 			/*** LAPTOP ***********************************************/
 			@media only screen and (min-width: 1200px) {
 				body {
 					background-color: dodgerblue;
 					}
 				}
 			/*** DESKTOP OR BIGGER ************************************/
 			@media only screen and (min-width: 1800px) {
 				body {
 					background-color: violet;
 					/*background-color: hsl(300, 25%, 35%);*/
 					}
 				}
 		</style>
 	</head>
 	<body>

 	</body>
 	<!-- ================================================== -->
 	<!-- JavaScript at end for faster page loading. -->
 	<!-- ================================================== -->
 	<!-- Help older browsers to handle unknown elements (see also the style element): -->
 	<!-- <script>document.createElement("unknown-element-name");</script> -->
 	<!-- ================================================== -->
 	<!-- Help older browsers to handle unknown elements: -->
 	<!--[if lt IE 9]>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
 		<script src="/js/html5shiv.js"></script>
 	<![endif]-->
 	<!-- ================================================== -->
 	<!-- Penn Foster recommended way to help older browsers to handle unknown elements: -->
 	<!--[if lt IE 9]>
 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
 	<!-- ================================================== -->
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- ================================================== -->
	<title>HTML5 Skeleton</title>
	<!-- ================================================== -->
	<meta charset="utf-8" />
	<!-- ================================================== -->
	<!-- Optional support for older (IE9 or older) Microsoft browsers: -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale and disable zooming on mobile devices: -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation and specify a maximum scale: -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 /> -->
	<!-- ================================================== -->
	<!-- Automatically scale contents to viewport size and orientation: -->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- ================================================== -->
	<style>
	, :before, *:after {
	box-sizing: inherit;
	}
	abbr,acronym {/CSS RESET/
	border:0;
	}
	address,caption,cite,code,dfn {/CSS RESET/
	font-style:normal;
	font-weight:normal;
	}
	article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {/BACKWARD COMPATIBILITY/
	display: block;
	}
	blockquote,body,div,h1,h2,h3,h4,h5,h6,html,li,ol,p,ul {/CSS RESET/
	margin:0;
	padding:0;
	}
	html {
	box-sizing: border-box;
	}
	unknown-element-name {/UNKNOWN ELEMENT/
	display: block;
	}
	/* PHONES OR SMALLER **********************************/
	@media only screen and (max-width: 599px) {
	body {
	background-color: yellow;
	}
	}
	/* PORTRAIT TABLET ************************************/
	@media only screen and (min-width: 600px) {
	body {
	background-color: green;
	}
	}
	/* LANDSCAPE TABLET ***********************************/
	@media only screen and (min-width: 900px) {
	body {
	background-color: orange;
	}
	}
	/* LAPTOP *********************************************/
	@media only screen and (min-width: 1200px) {
	body {
	background-color: dodgerblue;
	}
	}
	/* DESKTOP OR BIGGER **********************************/
	@media only screen and (min-width: 1800px) {
	body {
	background-color: violet;
	/background-color: hsl(300, 25%, 35%);/
	}
	}
	</style>
	</head>
	<body>

	</body>
	<!-- ================================================== -->
	<!-- JavaScript at end for faster page loading. -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements (see also the style element): -->
	<!-- <script>document.createElement("unknown-element-name");</script> -->
	<!-- ================================================== -->
	<!-- Help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
	<script src="/js/html5shiv.js"></script>
	<![endif]-->
	<!-- ================================================== -->
	<!-- Penn Foster recommended way to help older browsers to handle unknown elements: -->
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- ================================================== -->
	</html>