Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- theme: video games day 12 september 2021 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>National Video Games Day</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="mystyles.css">
	<script src="https://kit.fontawesome.com/41c8573884.js" crossorigin="anonymous"></script>
</head>

<body>
	<!-- back to top button -->
	<button onclick="topFunction()" id="top-button" title="Go to top">
		<i class="far fa-hand-point-up"></i></i></i>
	</button>
	<!-- two columns container -->
	<div class="container">
		<!-- header -->
		<header class="top">
			<h1>National Video Games Day</h1>
			<h2>Sunday, 12 September 2021</h2>
			<div class="image">
				<img src="https://i.gifer.com/origin/e2/e2917a322c5c7247c308d53725f0189f.gif" alt="gameboy gif" width="300" height="auto">
			</div>
			<footer>
				<p><small>Created by Raya Bergin</small></p>
				<p><small>&copy;31Jan2022</small></p>
				<p><small><i class="fas fa-file-image"></i> gif by Dojin</small></p>
			</footer>
		</header>
		<!-- main part -->
		<main>
			<!-- 1 column -->
			<div class="column">
				<article>
					<h2>Will the real National Video Games Day please stand up</h2>
					<p>
						Playing video games is one of my favorite activities.<br>
						This is the reason I chose this special September holiday theme for this coding lab activity.
					</p>
					<p>
						NVGD is celebrated yearly and only in this country.
					</p>
					<p>
						There is also a "National Video <em>Game</em> Day" that's celebrated on 8 July; however, this site is dedicated to the real NVGD and that is September's <strong><span class="emphasize">National Video <em>Games</em> Day</strong></span>.
					</p>
					<p>
						According to <a href="https://www.calendarr.com/united-states/national-video-game-day/" target="_blank">Calendarr</a>, in 1997, the celebrated holiday's date moved from 8 July to 12 September, and the event was then named "National Video <em>Games</em> Day".
					</p>
					<p>
						The <a href="https://gamehistory.org/why-is-today-national-video-game-day/" target="_blank">Video Game History Foundation</a> says that the first day NVGD was celebrated was on 8 July 1991, then the NVGD date moved to 12 September 1997.<br>
						The author goes on to say that a certain David Earle, President of Kid Vid Warriors, had sponsored the event every year from 8 July 1991 to 8 July 1993, then on 12 July 1994 and 12 July 1995, and finally on 10 September 1996.<br>
						The article shows printed proof (a 1997 edition of <em>Chase's Calendar of Events</em>) that 12 September <strong>is</strong> the official date for National Video Games Day.
					</p>
					<p>
						<a href="https://www.thegamer.com/national-video-game-day-pointless-holiday/" target="_blank">TheGamer</a> says that the 8 July National Video <em>Game</em> Day holiday is a "pointless holiday".<br>
						TheGamer believes that the only one true video games holiday is on 12 September and is National Video <em>Games</em> Day.<br>
						The 8 July holiday was, according to the author, "a made up holiday created by the fake president of a pretend club in a phoney book".<br>
						I laughed after reading that line.
					</p>
					<p>
						I, too, believe that the only real celebrated National Video <em>Games</em> Day is on 12 September.<br>
						"National Video <em>Games</em> Day" looks and sounds a lot better than "National Video <em>Game</em> Day".<br>
						Besides, the "games" version gives me a good feeling that this holiday celebration includes every video game and every type of video game player.
					</p>
				</article>
				<article>
					<h2>Celebrate NVGD your way!</h2>
					<p>
						Are you a video game fanatic (like me 😁)? Good for you! Or are you an occasional video game player? Also good for you!
					</p>
					<p>
						This day offers an opportunity to celebrate this special national holiday your way.
					</p>
					<p>
						You might play a level that's been bugging you for weeks, or re-start a game from the very beginning, if you've forgotten where you ended last.<br>Or you might start a game you've downloaded weeks ago and haven't played yet.
					</p>
					<p>
						Do whatever you want!
					</p>
					<p>
						If you're the kind of person who likes to play in a dark room, close the blinds, keep the room lights off, put your headphones on, set your iphone or android on do not disturb mode, and play video games all day.
					</p>
					<p>
						If you don't like playing alone, invite friends over.<br>Make it a video games party, or do the online multiplayer thing.
					</p>
					<p>
						Today, video game players rule!
					</p>
					<p>
						Now that you know all about the <span class="emphasize">official 12 September National Video Games Day</span>, treat yourself today!
					</p>
					<p>
						Buy any or all of the games mentioned here or a newly released game.
					</p>
					<p>
						Aside from Steam, video games are available to purchase on <a href="https://www.epicgames.com/store/en-US/" target="_blank">Epic Games</a>, <a href="https://www.origin.com/usa/en-us/store" target="_blank">Origin</a>, and <a href="https://www.ubisoft.com/en-us/" target="_blank">Ubisoft</a>.
					</p>
				</article>
				<article>
					<h2>The 3 top video games to date (from 3 popular genres of 2021) that you <strong>must</strong> play</h2>
					<p>
						To polish off this special holiday, I'd like to recommend exceptional games from each of this year's three popular genres: Action RPG, Real-time Strategy, and Fighting & Martial Arts.<br>
						I've played the first 2 games, but I haven't played the third game yet.<br>
					</p>
					<h3>Action RPG</h3>
					<p>
						<span class="bold"><strong>Description: </strong></span>"Action role-playing (often abbreviated action RPG or ARPG) is a subgenre of video games that combines core elements from both the action game and role-playing genre." <a href="https://en.wikipedia.org/wiki/Action_role-playing_game" target="_blank">Wikipedia</a><br>
						This is my best-loved genre.
					</p>
					<h4>Grim Dawn</h4>
					<p>
						<span class="bold"><strong>Summary: </strong></span>"Players are thrust into the dark, war-torn world of Cairn where a once proud empire has been brought to ruin and the human race driven to the edge of extinction. Cairn has become ground zero of an eternal war between two otherworldly powers, one seeking to use human bodies as a resource, the other intent upon destroying the human race before that can happen. This cataclysmic war has not only decimated human civilization but is warping the very fabric of reality and, in its wake, giving life to new horrors." <a href="https://www.metacritic.com/game/pc/grim-dawn" target="_blank">Metacritic</a><br>
						<span class="bold"><strong>Platform: </strong></span>Microsoft Windows<br>
						<span class="bold"><strong>Modes:</strong></span> Single-player, multiplayer<br>
						<span class="bold"><strong>Metacritic User Score:</strong></span><span class="score"> 8.4</span><br>
						<span class="bold"><strong>Where to buy: </strong></span> <a href="https://store.steampowered.com/app/219990/Grim_Dawn/" target="_blank">Steam</a>
					</p>
					<h3>Real-Time Strategy</h3>
					<p>
						<span class="bold"><strong>Description:</strong></span> "Real-time strategy (RTS) is a sub-genre of strategy video games that do not progress incrementally in turns, but allow all players to play simultaneously, in "real time"." <a href="https://en.wikipedia.org/wiki/Real-time_strategy" target="_blank">Wikipedia</a>
					</p>
					<h4>Shadow Tactics: Blades of the Shogun</h4>
					<p>
						<span class="bold"><strong>Summary:</strong></span> "The game is a special take on the genre: it takes place during the Edo period of Japan in 1615. Within a playtime of roughly 25 hours, 5 characters will face challenging missions, each protagonist with their own special field of expertise. Only if you know the positive and negative qualities of your characters and play tactically and with finesse, will you master the challenges ahead." <a href="https://www.metacritic.com/game/pc/shadow-tactics-blades-of-the-shogun" target="_blank">Metacritic</a><br>
						<span class="bold"><strong>Platforms:</strong></span> PlayStation 4, Microsoft Windows, Linux, macOS, Classic Mac OS, Xbox One<br>
						<span class="bold"><strong>Mode:</strong></span> Single-player<br>
						<span class="bold"><strong>Metacritic User Score:</strong></span><span class="score"> 8.5</span><br>
						<span class="bold"><strong>Where to buy:</strong></span> <a href="https://store.steampowered.com/app/418240/Shadow_Tactics_Blades_of_the_Shogun/" target="_blank">Steam</a>
					</p>
					<h3>Fighting & Martial Arts</h3>
					<p>
						<span class="bold"><strong>Description:</strong></span> When I googled the above title, Google showed me the first result of <a href="https://en.wikipedia.org/wiki/Fighting_game" target="_blank"> Wikipedia's "fighting game".</a><br>
						"A fighting game (also known as versus fighting game) is a video game genre that involves combat between pairs of fighters with game elements such as blocking, counter-attacking, and chaining attacks together into "combos".
					</p>
					<h4>Sleeping Dogs</h4>
					<p>
						<span class="bold"><strong>Summary:</strong></span> "Sleeping Dogs is an open world cop drama set in the vibrant city of Hong Kong. Taking the role of undercover cop Wei Shen, players must take down one of the world's most lethal criminal organizations from the inside. Featuring imaginative combat systems, Sleeping Dogs enables players to perform an array of martial arts moves, singlehandedly taking on numerous opponents. Players perform visceral kicks and combos, vicious counters and a cinematic set of environmental takedowns making use of real-world items from circular saws to phone booths, incinerators to refrigerator doors." <a href="https://www.metacritic.com/game/pc/sleeping-dogs" target="_blank">Metacritic</a><br>
						<span class="bold"><strong>Platforms:</strong></span> PlayStation 3, PlayStation 4, Microsoft Windows, macOS, Xbox 360, Xbox One<br>
						<span class="bold"><strong>Mode:</strong></span> Single-player<br>
						<span class="bold"><strong>Metacritic User Score:</strong></span><span class="score"> 8.2</span><br>
						<span class="bold"><strong>Where to buy: </strong></span><a href="https://store.steampowered.com/app/202170/Sleeping_Dogs/" target="_blank">Steam</a>
					</p>
				</article>
			</div>
		</main>
	</div>
	<script src="myscripts.js"></script>
</body>

</html>
              
            
!

CSS

              
                /* MY TEMPLATE */
/* CSS Reset */
* {
	/* Outline to view layout on screen while styling | Remove after styling */
	/* outline: 0.0625em dashed #ff0075; */
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
	font-size: 100%;
}
a {
	text-decoration: none;
}

/* declaring variables for colors */
:root {
	--white: #fff;
	--darkviolet: #2e183b;
	--darkorange: #ff5200;
	--brightgreen: #66ff00;
	--blushpink: #ff77ff;
	--yellow: #ffff00;
}

/* basic styles */
body {
	font-family: "Montserrat", sans-serif;
	color: var(--white);
	background-color: var(--darkviolet);
	max-width: 75%;
	margin: 0 auto;
	padding: 1em;
}
h1 {
	font-family: "Press Start 2P", cursive;
}
h2,
h3,
h4 {
	font-family: "Roboto Mono", monospace;
}

/* BACK TO TOP button */
#top-button {
	display: none;
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 2;
	font-size: 2.5rem;
	border: none;
	outline: none;
	background-color: transparent;
	color: var(--darkorange);
	cursor: pointer;
	padding: 0.25em;
}

/* two columns container */
.container {
	display: flex;
}
/* header */
.top {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.top h1 {
	padding-top: 1em;
	font-size: 2.25rem;
	color: var(--darkorange);
}
.top h2 {
	padding: 1em 0 1em 0;
	text-transform: uppercase;
	font-size: 1.15rem;
	color: var(--darkorange);
}
.top .image {
	width: 100%;
	height: auto;
	margin-bottom: auto;
}
.top footer {
	font-family: "Roboto Mono", monospace;
	color: var(--darkorange);
	padding-bottom: 1em;
}

/* main part */
.column article h2,
h3,
h4 {
	text-transform: uppercase;
	padding: 1em 0;
}
.column article h2 {
	color: var(--darkorange);
	padding-left: 1em;
}
.column article h3 {
	color: var(--blushpink);
	padding-left: 2em;
}
.column article h4 {
	color: var(--brightgreen);
	padding-left: 3em;
}
.column article p {
	line-height: 1.75rem;
	padding: 1em 3em 1em;
}
.column article p .bold {
	color: var(--darkorange);
}
/* metacritic user score */
.score {
	font-family: "Roboto Mono", monospace;
	color: var(--brightgreen);
}
/* emphasized text*/
.emphasize {
	font-family: "Roboto Mono", monospace;
	color: var(--darkorange);
}
/* links */
a {
	font-family: "Roboto Mono", monospace;
	color: var(--yellow);
}
a:hover {
	color: var(--blushpink);
	background-color: var(--brightgreen);
}
a:active {
	color: var(--brightgreen);
	background-color: var(--darkorange);
}

/* Laptop styles */
/* max-width 64em (1024px) */
@media (max-width: 64em) {
	/* basic styles */
	body {
		max-width: 100%;
	}

	/* BACK TO TOP button */
	#top-button {
		bottom: 0.5em;
		right: 0.5em;
	}

	/* two columns container */
	/* header */
	.top h1 {
		padding-top: 0.5em;
	}

	/* main part */
	.column article h2,
	h3,
	h4 {
		padding: 0.5em 0;
	}
	.column article h2 {
		padding-left: 1em;
	}
}

/* Tablet styles */
/* max-width 48em (768px) */
@media (max-width: 48em) {
	/* basic styles */
	body {
		margin: 0 1em;
		padding: 0;
	}
	/* BACK TO TOP button */
	#top-button {
		font-size: 2.25rem;
	}
	/* header */
	/* main part */
	.column article h2 {
		padding-left: 0.75em;
	}
	.column article h3 {
		padding-left: 1.5em;
	}
	.column article h4 {
		padding-left: 2.5em;
	}
	.column article p {
		padding: 1em 2.5em 1em;
	}
}

/* Mobile styles */
/* max-width 26.5em (425px) */
@media (max-width: 26.5em) {
	/* BACK TO TOP button */
	#top-button {
		bottom: 0.25em;
		right: 0.25em;
		font-size: 2.25rem;
	}
	/* two columns container */
	.container {
		flex-direction: column;
	}
	/* header */
	.top {
		text-align: center;
	}
	.top h1 {
		padding-top: 1em;
		font-size: 1rem;
	}
	.top h2 {
		padding: 1em 0 1em 0;
		font-size: 0.75rem;
	}
	.top footer {
		padding: 0.5em 0;
	}
	/* main part */
	.column article h2,
	h3,
	h4 {
		padding: 0.5em 0;
		font-size: 1rem;
	}
	.column article h2 {
		padding-left: 0.75em;
	}
	.column article h3 {
		padding-left: 1.25em;
	}
	.column article h4 {
		padding-left: 1.5em;
	}
	.column article p {
		padding: 1em 1.75em 1em;
	}
}

              
            
!

JS

              
                // Get the button
var mybutton = document.getElementById("top-button");

// When the user scrolls down 100px from the top of the document, show the button
window.onscroll = function () {
	scrollFunction();
};

function scrollFunction() {
	if (
		document.body.scrollTop > 100 ||
		document.documentElement.scrollTop > 100
	) {
		mybutton.style.display = "block";
	} else {
		mybutton.style.display = "none";
	}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
}

              
            
!
999px

Console