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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

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

	<head>

		<meta charset="utf-8">
		
		<!--
			The <meta> element below is important to help change the size of our browser window to reflect the size of the device. It works as follows:

				name="viewport" - this clarifies that we are declaring something about the viewport (aka browser window)
				'width=device-width' - this specifies that the width of the viewport should be equal to the width of our device (important for mobile devices)
				'initial-scale=1' - this ensures that our website renders not zoomed-in or zoomed-out, as we have designed it to be responsive.

			If you would like more information on why we set this, I recommend reading this article - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<title>My Less Hideous Page</title>

		<link rel="stylesheet" href="css/normalize.css">	
		<link rel="stylesheet" href="css/grid.css">
		<link rel="stylesheet" href="css/main.css"> 
		<link rel="stylesheet" href="css/fonts.css"> 


	</head>

	<body>

		<h1>My Less Hideous Page</h1>

		<p>
			A robot is a <em>dangerous</em>, often humanoid, autonomous being that will take over soon. We must be vigilant. We must be wary. We must prepare to stop the robots from taking over. Transformers are here and are real. Robots such as Honda's <abbr title="Advanced Step in Innovative Mobility">ASIMO</abbr> is proof of that. They walk, and soon enough they will also be able to talk and drive us around. That is dangerous.
		</p>

		<!-- 
			We removed the .add-gutters class as it looks odd once we have docked our navigation to the top of the page.
		-->
		<nav class="nav-main grid four-column">

			<a href="#robot" class="nav-main-item">See a Robot</a>
			<a href="#comments" class="nav-main-item bg1">Comment on Robots</a>
			<a href="https://en.wikipedia.org/wiki/Robot" class="nav-main-item bg2">Robots (Wikipedia)</a>
			<a href="https://www.shutterstock.com/search/robots?search_source=base_keyword" class="nav-main-item bg3">Robot Photos</a>
		
		</nav>

		<section id="robot">
		
			<h2>See a Robot</h2>
			
			<div class="grid two-column add-gutters">
		
				

				<!--
					Note that we have added a class of 'caption-inside' to our figure tag to alter how the caption appears on this element.
				-->
				<figure class="caption-inside">

					<img src="https://andrewh.ca/teaches/web_design_and_development/tutorials/04/explanation/img/robot.jpg" alt="A toy robot with a menacing expression" height="1600" width="1063">
					<figcaption>Beware of robots like this.</figcaption>

				</figure> 
					
			
				<div class="column">
					<h3>Links about robots:</h3>
					<ol>

						<li>
							<a href="https://en.wikipedia.org/wiki/Robot" target="_blank">Wikipedia on Robots</a>
						</li>
						<li>
							<a href="https://www.shutterstock.com/search/robots?search_source=base_keyword" target="_blank">Photos of robots</a>
						</li>
					</ol>
				</div> 


			</div> 



			<h3>The code of how robots deal with humans:</h3>

			<code>
				# Human protocol<br>
				robot.see("human", function(seen) {<br>
				seen.destroy();<br>
				});<br>
			</code>

			<h3>What the robot does as a result:</h3>

			<samp>EXTERMINATE! EXTERMINATE! EXTERMINATE!</samp>

		</section>


		<section id="comments">

			<h2>Comment on Robots</h2>
			<p><strong>Commenting is currently closed.</strong></p>

		</section>


	</body>
</html>
              
            
!

CSS

              
                /* THIS IS WHAT WAS MODIFIED IN MAIN.CSS AS PART OF THE TUTORIAL */
/*
	Because we already have an existing class for our navigation, we can just select it.
*/
.nav-main {

	/*
		Using the position property we can specify that we want this element to be positioned differently then the default 'static' positioning.

		In this case, fixed positioning 'fixes' the element to the page while you scroll.
	*/
	position: fixed;

	/*
		Only once we set the positioning of an element to a value other then 'static' can we use the top, right, bottom, and left properties. These properties define the distance of the element along those edges depending on what kind of positioning is set.

		In this case, we are making sure our 'fixed' element is positioned zero pixels from the top, left, and right edges.
	*/
	top: 0;
	right: 0;
	left: 0;

	/*
		Because elements that appear later on our page have a positioning set, we have to use the z-index property to ensure that our fixed navigation does not get overlapped by them when we scroll. Higher values for z-index indicate a higher layer.
	*/
	z-index: 10;
}

/*
	By setting a positioning for the .caption-inside element - in this case a <figure> - we can ensure that its child elements - <img> and <figcaption> - stay within the bounds of their parent when being positioned.

	Position relative without any top, right, bottom, and left properties remains in the same spot as a statically positioned element.
*/
.caption-inside {
	position: relative;
}


/*
	A reminder that a space between the two selectors below '.caption-inside' and 'figcaption' indicates only 'figcaptions' that are children of '.caption-inside' elements will be styled as specified
*/
.caption-inside figcaption {

	/*
		Positioning an element as 'absolute' sets it to be positioned absolutely to the last parent element with a positioning set (other then static).

		As <figcaption> is the child of .caption-inside, which is positioned relative, <figcaption> is then positioned absolutely to .caption-inside based on the top, right, bottom, and left values set.
	*/
	position: absolute;

	/*
		By setting a bottom value of 0 we are placing the caption right at the bottom of the image.
	*/
	bottom: 0;

	padding: 0.25rem 0.5rem;
	
	/*
		To help ensure that the content in our caption is readable, we can use a black background with some opacity and white text to increase the contrast.
	*/
	color: white;
	background-color: rgba(0, 0, 0, 0.9);


	/* 
		By setting the width to 100% we can have it span the full width of the image.
	*/
	width: 100%;
}


/*
	This will fix the little space at the end of image elements because they are not 'block' level elements by default.
*/
img {
	display: block;
}



/*
	Because our navigation is now fixed and overlaps our content, we need to introduce some space at the top of our page to ensure that overlap doesn't occur. The simplest solution to this is to introduce 'padding-top' to the body element so all the content has some additional spacing (thereby avoiding the overlap).
*/
body {
	padding-top: 8rem;
}





@media (min-width: 51.25rem) {
	/*
		Using the same selector in the media queries, we can adjust the padding-top for the body tag as the page resizes.
	*/
	body {
		padding-top: 4rem;
	}

}



@media (min-width: 70rem) {
	/*
		Using the same selector in the media queries, we can adjust the padding-top for the body tag as the page resizes.
	*/
	body {
		padding-top: 2rem;
	}
}







/* THIS IS IN GRIDS.CSS IN THE TUTORIAL FILES */
* {
	box-sizing: border-box;
}

.grid {
	display: grid;
}

.grid.add-gutters {
	grid-column-gap: 1rem;
	grid-row-gap: 0.25rem;
}





@media (min-width: 51.25rem) {
	
	.grid.two-column, .grid.four-column {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-auto-flow: row;
	}

}


@media (min-width: 70rem) {
	
	.grid.four-column {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-auto-flow: row;
	}
}



/* THIS IS IN MAIN.CSS IN THE TUTORIAL FILES */
body {
	font-family: "Fira", Verdana, sans-serif;
	margin: 1rem;
	font-size: 1.25rem;
}

h1 {
	font-size: 3rem;
	margin-bottom: 0;
}

h2 {
	font-size: 2.25rem;
	margin-bottom: 0;
}

h3 {
	font-size: 1.6rem;
	margin-bottom: 0;
}

p, ol, ul {
	max-width: 40rem;
}

img {
	height: auto; 
	max-width: 100%;
	border-width: 0.1rem;
	border-style: solid;
	border-color: black; 
}

figure {
	margin: 0;
}

figcaption {
	font-style: italic;
}

a {
	color: rgb(200,0,0);
	transition-property: color;
	transition-duration: 0.5s;
}

a:active, a:hover, a:focus {
	color: rgb(50,0,0); 
	text-decoration: none;
}

code, samp {
	display: block;
	background-color: rgb(230,230,230);
	padding: 0.5rem;
}

.nav-main-item {
	display: inline-block;
	color: white;
	background-color: rgb(250,100,75);
	font-size: 1.5rem;
	padding: 0.25rem 0.5rem;
	text-decoration: none;

	transition-property: background-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

.nav-main-item:active, .nav-main-item:hover, .nav-main-item:focus {
	color: white;
	background-color: rgb(50,50,50);
}

.bg1 {
	background-color: purple;
}

.bg2 {
	background-color: green;
}

.bg3 {
	background-color: blue;
}

              
            
!

JS

              
                
              
            
!
999px

Console