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

              
                
<div class="container">
		<div class="jumbotron">
			<div class="row">
				<h1>Patrick Roy #33</h1>
				<h3 class="nickname">Saint Patrick</h3>
				<div class="thumbnail">
					<img src="https://3.bp.blogspot.com/-BWWQ96l1fd8/U0zCbQH5k5I/AAAAAAAABQg/0Jb-4ADTB4g/s1600/patrick+roy+cup+edit.jpg">
					<div class="caption">
					<em>Patrick Roy winning the Stanley Cup with the Colorado Avalanche.</em>
					</div> <!-- caption -->
				</div> <!-- thumbnail -->
				<div class="col-xs-12 col-md-6 col-md-offset-3">
					<h3 class="dates">Significant Dates</h3>
					<ul>
						<li><span class="year">5 October 1965 - </span>born in Quebec City.</li>
						<li><span class="year">1984 - </span>drafted in the third round by the Montreal Canadiens, despite disliking the team due to rivalry.</li>
						<li><span class="year">1985 - </span>began playing for the Canadiens regularly, 47 games total for the season. He led his team to unexpectedly win the Stanley Cup title. He also received the Conn Smythe Trophy for the Most Valuable Player in the playoffs, becoming the youngest player to win this title at 20 years old.</li>
						<li><span class="year">1987, 1988, 1989 - </span>won the William M Jennings trophy.</li>
						<li><span class="year">1989, 1990 - </span>won the Veniza Trophy for best goaltender in the NHL.</li>
						<li><span class="year">1995 - </span>traded to the Colorado Avalanche in what became known as one of the most one-sided deals in NHL history, following an incident with an ex-teammate who became coach. This same season, he helped the Colorado Avalanche (who just moved from Quebec, formerly known as the Nordiques) to win their first Stanley Cup.</li>
						<li><span class="year">1996 - </span>led the Colorado Avalanche to another Stanley Cup title in triple overtime.</li>
						<li><span class="year">1996-2002 - </span>met the Red Wings in the playoffs, considered the biggest rivalry in the NHL, winning in 1996, 1999, and 2000. The Red Wings won in 1997 and 2002.</li>
						<li><span class="year">2000-01 - </span>set two records, one for 19 career playoff shutouts, the other for third time playoff MVP.</li>
						<li><span class="year">2003 - </span> final game April 22, 2003. Retired from NHL. The Colorado Avalanche retired #33.</li>
						<li><span class="year">2005 - </span>became vice precident of Quebec Ramparts, a junior hockey league team, later becoming the owner and general manager. Then was named head coach of the team September 29, 2005.</li>
						<li><span class="year">2006 - </span>Became the seventh coach to win the Cup on his rookie year, the first since 1997. He was also elected to the NHL Hall of Fame, his first year of eligibility.</li>
						<li><span class="year">2008 - </span>Montreal Canadiens retired number 33 in honor of Roy. Becoming the sixth to have his number retired by two different organizations.</li>
						<li><span class="year">2009 - </span>offered the head coaching position with the Colorado Avalanche, of which he declined</li>
						<li><span class="year">2013 - </span>named head coach and vice president of hockey operations of the Colorado Avalanche. He won his first six games as a rookie coach, tying his former coach whom he escaped the Canadiens due to.</li>
						<li><span class="year">2016 - </span>stepped down as head coach and Vice President of Hockey Operations, citing lack of input in personnel decisions.</li>
					</ul>

          <h4>For more information,</h4>
          <h4>check out his<a href="https://en.wikipedia.org/wiki/Patrick_Roy" target="_blank">Wikipedia page</a>.</h4>
				</div> <!-- dates column -->
			</div> <!-- main row -->
		</div> <!-- jumbotron -->
	</div> <!-- main container -->

	<p class="text-center">Written and coded by Jonathan Brock</p>
              
            
!

CSS

              
                body {
	margin-top: 30px;
	text-align: center;
	font-family: Raleway;
  background: #165788;
}

img {
  max-height: 96vh;
}

li {
	text-align: left;
  font-size:1.2em;
	border-bottom: 2px solid #165788;
  margin-bottom: 5px;
	padding-bottom: 5px;
}

li:first-of-type {
  padding-top: 5px;
}

li:last-of-type {
  border-bottom: none;
}

h1, h3 {
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
				0px 8px 13px rgba(0,0,0,0.1),
				0px 18px 23px rgba(0,0,0,0.1);
  letter-spacing: .1em;
}

h3 a {
	text-shadow: initial;
}

h1 {
	font-weight: 700;
}

p {
  color: white;
}

h1, .nickname {
	text-transform: uppercase;
}

.year {
	font-weight: 700;
}

.jumbotron {
	background: #D3D3D3;
}

.jumbotron h1, .jumbotron .dates {
	color: #822433;
}

.jumbotron .nickname, .jumbotron li {
	color: #165788;
}

.thumbnail {
	max-width: 800px;
	margin: auto;
	background: #D3D3D3;
	border: none;
}
              
            
!

JS

              
                
              
            
!
999px

Console