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

              
                <!-- NAVIGATION -->
	<nav id="home">
		<div class="nav-wrapper blue darken-3">	
			<!--<a href="#" data-activates="mobile-menu" class="button-collapse show"><i class="material-icons">menu</i></a> -->
			<!-- MAIN NAVIGATION - LARGE SCREEN -->
			<ul class="left hide-on-med-and-down">
				<li><a href="#home">Home</li></a>
				<li><a href="#mat-design">Material Design</li></a>
				<li><a href="#cards">Cards</li></a>
				<li><a href="#carousel">Carousels</li></a>
				<li><a href="#modals">Modals</li></a>
			</ul>
			
			<!-- MOBILE COLLAPSABLE NAVIGATION - MED & SM SCREENS -->
			<ul id="slide-out" class="side-nav">
				<li><a href="#home">Home</li></a>
				<li><a href="#mat-design">Material Design</li></a>
				<li><a href="#cards">Cards</li></a>
				<li><a href="#carousel">Carousels</li></a>
				<li><a href="#modals">Modals</li></a>
			</ul>
			<!-- HAMBURGER ICON -->
			<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
		</div>
	</nav> 

<!-- SLIDE OUT NAVIGATION 
<ul id="slide-out" class="side-nav">
	<li><a href="#home">Home</li></a>
	<li><a href="#mat-design">Material Design</li></a>
	<li><a href="#cards">Cards</li></a>
	<li><a href="#carousel">Carousels</li></a>
	<li><a href="#modals">Modals</li></a>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> -->

<!-- END SLIDE OUT NAVIGATION -->

<!-- HEADER -->
<div class="container header orange lighten-3">
	<div class="row">
		<!-- SMALL SCREEN -->
		<h1 class="hide-on-med-and-up center-align white-text blue darken-3 z-depth-3" id="small-h1">MATERIALIZE</h1>
		<!-- MEDIUM SCREEN -->
		<h1 class="hide-on-small-only hide-on-large-only center-align white-text blue darken-3 z-depth-3" id="medium-h1">MATERIALIZE</h1>
		<!-- LARGE SCREEN -->
		<h1 class="hide-on-med-and-down center-align white-text blue darken-3 z-depth-3" id="large-h1">MATERIALIZE</h1>
		<h4 class="center-align thin blue-grey-text blue accent-1 z-depth-2">CSS Framework</h4>
	</div>
</div>

<!-- GREETING -->
 <div class="container greeting"> 
  <h3 id="greeting" class="left-align blue-grey-text">Hello</h3>
	 <h5 class="left-align thin">Welcome to the Materialize CSS Framework Reference</h5>
	 <div class="row">		 
		 <p class="col m7 l7 flow-text">I have built several websites using the Bootstrap framework and I have been pleased with the results. But now I am interested in learning a few more CSS frameworks. <br><br>
		 Over time, this site will morph into a Materialize reference site that can be referred to when learning and building new sites.</p>
		 <img class="responsive-img col m4 l4 offset-m1 offset-l1 hide-on-small-only"  src="https://s19.postimg.org/9bifg5znn/world.png" alt="chalkboard that says web design"> 
	 </div> <!-- END GREETING ROW -->
</div> <!-- END GREETING -->

<div class="container"><hr></div>

<!-- MATERIAL DESIGN -->
<div class="container mat-design" id="mat-design">
	<h3 class="left-align blue-grey-text">What is Material Design?</h3>
	<h5 class="left-align thin">Design Language Developed by Google</h5>
	<p class="definition">Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.</p>
	<p>If you want to know more, go to the official Material Design website.</p><br>
	<p class="center-align"><a href="https://material.io/" target="_blank" title="material.io" class="waves-effect waves-light btn-large"><i class="material-icons right">info</i>Material Design</a></p>
</div> <!-- END MATERIAL DESIGN -->
	
	<div class="container"><hr></div>

	<!-- CARDS -->
<div class="container cards" id="cards">
	<h3 class="left-align blue-grey-text">Cards</h3>
	<h5 class="left-align thin">Convenient Ways to Display Content</h5>
	<div class="row">
		<div class="col s12 m12">
			<!-- BASIC CARD -->
			<div class="card blue-grey z-depth-4">
				<div class="card-content white-text">
					<span class="card-title center-align">This is a Basic Card</span>
					<hr>
					<p class="thin">Cards are a convenient way to display content composed of different types of objects. Basic Cards can cover the width of a container (like this one) or be smaller, depending on your design and your content. Also include images, change the background color, and any other formatting you can think of.<br><br>Basic Cards and Image Cards can have links, too.<br><br><a class="btn btn-floating pulse no-pointer"><i class="material-icons">arrow_downward</i></a></p>
				</div>
				<div class="card-action">
					<a href="http://materializecss.com" target="_blank">Materialize CSS</a>
				</div>
			</div>
		</div>
		<!-- IMAGE CARD -->
		<div class="col s12 m6 l6">
			<div class="card z-depth-3">
				<div class="card-image">
					<img src="https://s19.postimg.org/4qw7dp3gj/spiral_abstract.jpg">
					<span class="card-title white-text">Image Card</span>
				</div>
				<div class="card-content">
					<p class="thin">This is an example of an Image Card. It's a great attention grabber.</p>
				</div>
				<div class="card-action center-align">
					<a href="https://material.io/" target="_blank">Material Design Website</a>
				</div>
			</div>
		</div>
		<!-- FAB IMAGE CARD -->
		<div class="col s12 m6 l6">
			<div class="card z-depth-3">
				<div class="card-image">
					<img src="https://s19.postimg.org/v0hbk11vn/Sand_Dune_XXVI.jpg">
					<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
				</div>
				<div class="card-content">
					<span class="card-title">FAB Image Card</span>
					<p class="thin">FAB means "Floating Action Button" and it can be used multiple ways. Use it as a call-to-action, to get likes, as a link, etc.</p>
				</div>
			</div>
		</div>
	</div>
</div> <!-- END CARDS -->

<div class="container" id="under-cards"><hr></div>

<!-- CAROUSEL -->
<div class="container img-carousel" id="carousel">
	<h3 class="left-align blue-grey-text">Carousels</h3>
	<h5 class="left-align thin">Show Off Your Gorgeous Images</h5>
	<p>This might be the easiest carousel to set up ever! Just one HTML division, an anchor tag for each image in the carousel, and one line of JavaScript. And it looks amazing.</p>
	
		<div class="carousel">
			<a class="carousel-item" href="#one!"><img src="https://s19.postimg.org/5pvg5v3r7/dates-3.jpg"></a>
			<a class="carousel-item" href="#two!"><img src="https://s19.postimg.org/mayh7s5hf/dates-2.jpg"></a>
			<a class="carousel-item" href="#three!"><img src="https://s19.postimg.org/9iad7utvn/dates-1.jpg"></a>
			<a class="carousel-item" href="#four!"><img src="https://s19.postimg.org/5xehompc3/dates-4.jpg"></a>
			<a class="carousel-item" href="#five!"><img src="https://s19.postimg.org/uumgja37n/dates-5.jpg"></a>
		</div>	
	
</div> <!-- END CAROUSEL -->

<div class="container"><hr></div>

<!-- MODAL -->
<div class="container modals" id="modals">
	<h3 class="left-align blue-grey-text">Modals</h3>
	<h5 class="left-align thin">Pop Up Content</h5>

<!-- MODAEL TRIGGER -->
	<p class="center-align"><a class="waves-effect waves-light btn center-align" href="#modal1">Open a Sample Modal</a></p>

<!-- MODAL STRUCTURE -->
<div id="modal1" class="modal">
	<div class="modal-content">
		<h3 class="center-align">Some Sample Modal Content</h3>
		<p>Pretend there is a big pile of interesting text here.</p>
		<p>I am testing how modals work in Materialize. Once I understand them, I want to be able to open images in a full-screen modal.</p>
		<p class="center-align"><small><em>Click anywhere outside the modal to close it.</em></small></p>
	</div>
</div>
</div>


<!-- SUBFOOTER -->
<div class="subfooter orange lighten-3"></div>

<!-- FOOTER -->
<footer class="page-footer blue darken-3">
	<h5 class="white-text center-align thin">Materialize CSS Framework Reference</h5>
	<p class="white-text center-align thin"><i class="tiny material-icons">copyright</i> 2017 Michael Manges</p>
	<p class="white-text center-align thin">A C<i class="fa fa-codepen" aria-hidden="true"></i>dePen Project</p>
</footer>

<!-- RETURN TO TOP BUTTON -->


	<a href="#home" class="btn-floating btn-large waves-effect waves-light grey lighten-1 right-align hide-on-small-only" id="back-to-top" title="Back to top"><i class="material-icons">navigation</i></a>

              
            
!

CSS

              
                /* DOCUMENT */
body p {
	color: #555; 
	font-size: 1.3em;
}

/* DIVIDERS */
#under-cards {
	margin-top: 50px;
}

/* NAVIGATION */
 


/* HEADING */
.header {
	border-radius: 3px;
}

#small-h1 {
	padding-top: 75px;
	padding-bottom: 75px;
	border-radius: 4px;
	font-family: 'Vast Shadow', cursive;
	font-size: 2.3em;
}

#medium-h1 {
	padding-top: 75px;
	padding-bottom: 75px;
	border-radius: 4px;
	font-family: 'Vast Shadow', cursive;
	font-size: 3.5em;
}

#large-h1 {
	padding-top: 75px;
	padding-bottom: 75px;
	border-radius: 4px;
	font-family: 'Vast Shadow', cursive;
}

.header h4 {
	padding: 10px;
	border-radius: 2px;
}

/* GREETING */
.greeting {
	padding: 35px;
}

.greeting img {
	margin-top: 35px; 
}

/* MATERIAL DESIGN */
.mat-design {
	padding: 35px;
}

.definition {
	padding-top: 15px;
	padding-bottom: 35px;
}

#img-card {
	padding: 15px;
}

/* CARDS */
.cards h3 {
	padding-top: 35px;
	padding-left: 35px;
}

.cards h5 {
	padding-left: 35px;
	padding-bottom: 35px;
}

.no-pointer {
	cursor: default;
}

/* CAROUSEL */
.img-carousel h3 {
	padding-top: 35px;
	padding-left: 35px;
}

.img-carousel h5 {
	padding-left: 35px;
	padding-bottom: 35px;
}

.img-carousel p {
	padding-left: 35px;
}

/* MODALS */
.modals h3 {
	padding-top: 35px;
	padding-left: 35px;
}

.modals h5 {
	padding-left: 35px;
	padding-bottom: 35px;
}

.modals {
	margin-bottom: 75px;
}

/* SUBFOOTER */
.subfooter {
	height: 25px;
}


/* FOOTER */
footer {
	padding-bottom: 35px;
	padding-top: 75px;
}

footer p {
	letter-spacing: 0.07em;
}

/* BACK-TO-TOP BUTTON */
#back-to-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
}
              
            
!

JS

              
                $(document).ready(function() {
	
	/* GREETING FUNCTION */
	var time = new Date();
	var hours = time.getHours();
	var morning = "Good Morning";
	var afternoon = "Good Afternoon";
	var evening = "Good Evening";
	var hello = "Hello";
	
	if (hours < 12) {
		$('#greeting').html(morning);
	}
	else if (hours >= 12 && hours < 17) {
		$('#greeting').html(afternoon);
	}
	else {
		$('#greeting').html(evening);
	}
	// END GREETING
	/************************************/
	
	/* CAROUSEL */
	$('.carousel').carousel();
	
	// END CAROUSEL
	/************************************/
	
	/* BACK-TO-TOP BUTTON */
	
	/* When user scrolls down 20px from top of the document, show the button */
	window.onscroll = function() { scrollFunction() };
	
	function scrollFunction() {
		if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
			document.getElementById("back-to-top").style.display = "block";
		}
		else {
			document.getElementById("back-to-top").style.display = "none";
		}
	}
	
	/* When user clicks on the button, scroll to the top of the document NOT IN USE */
	/*function topFunction() {
		document.body.scrollTop = 0; // for Chrome, Safari, Opera
		document.documentElement.scrollTop = 0; // IE & Firefox
	} */
	// END BACK-TO-TOP BUTTON
	/************************************/
	
	// MODALS
	$('.modal').modal();
	
	// END MODALS 
	/************************************/
	
	// COLLASPABLE MOBILE NAVIGATION
	$('.button-collapse').sideNav();
	
	// END MOBILE NAVIGATION 
	/************************************/
	
	
}); // END SCRIPT 
              
            
!
999px

Console