cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Grid Test</title>
	<link href='https://fonts.googleapis.com/css?family=Lobster+Two|Raleway|Oswald:300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<header class="top-bar">
		<a class="social-link" href="/"><i class="fa fa-google-plus"></i></a>
		<a class="social-link" href="/"><i class="fa fa-tumblr"></i></a>
		<a class="social-link" href="/"><i class="fa fa-twitter"></i></a>
		<a class="social-link" href="/"><i class="fa fa-linkedin"></i></a>
		<a class="social-link" href="/"><i class="fa fa-facebook"></i></a>
		<a class="contact-link" href="tel:+9131234567"><i class="fa fa-phone"></i> 913.123.4567</a>
		<a class="contact-link" href="mailto:info@srskc.org"><i class="fa fa-envelope"></i> info@srskc.org</a>
	</header>

	<header class="main-header">
		<div class="logo-container">
			<p class="logo"><span>The</span> <span>Small Rodent Society</span> <span>of Kansas City</span></p>
		</div>
		<nav class="main-nav">
 			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="/about">About</a></li>
				<li><a href="/join">Join</a></li>
				<li><a href="/care">Rodent Care</a></li>
				<li><a href="/bite">Bite Treatment</a></li>
				<li><a href="/contact">Contact</a></li>
			</ul>
		</nav>
	</header>

	<section class="hero">
		<div class="message">
			<p><span>Small Rodents.</span><br /><span>Big Ideas.</span></p>
			<a href="/join" class="message-button button">Join the SRSKC!</a>
		</div>
		<div class="award">
			<img src="http://chris.house/images/award.png" alt="Award">
			<blockquote>"One of Kansas City's<br /> Finest Rodent Societies!"<br />
				<cite>-Rat Fancy Magazine</cite>
			</blockquote>			
		</div>
	</section>

	<section class="blog-posts">
		<h2>Recent Blog Posts</h2>
		<ul>
			<li>
				<h3>Long Haird Vs Short Haired Gerbils - the Timeless Debate Settled! <span class="blog-date">January 29th, 2018</span></h3>
				<article class="excerpt">Few topics in history have been as hostly debated, as divisive and as contentious as this one. The debate between long haired and short haired gerbils has spawned more Internet flame than any other discussion of its kind. Yet the final winner has yet to be determined. Until now.</article>
				<a href="/blog" class="read-more-article">Read More</a>
			</li>
			<li>
				<h3>The Proper Way to Shampoo a Ferret <span class="blog-date">January 20th, 2018</span></h3>
				<article class="excerpt">The act of shampooing your ferret may seem simple to newcomers. Just toss him into a bucket of soapy water and splash vigorously, right? Actually, no. There's a much more effective and safe way to clean up a dirty ferret. Today I'm going to shed some light on this often misunderstood and deceptively complex ritual.</article>
				<a href="/blog" class="read-more-article">Read More</a>
			</li>
		</ul>
	</section>

	<section class="news">
		<h2>SRSKC News & Announcements</h2>
		<ul>
			<li>
				<h3>Join Us for Rat-Con 2018!</h3>
				<article class="excerpt">The SRSKC is excited to announce the 58th annual Rat-Con! Coming to Bartle Hall on April 21st through the 23rd, Rat-Con 2018 brings together the biggest names in rat collecting for an informational and fun-filled three day event. Packed with internationally recognized guest speakers, Rat-Con is the most well known and highly regarded rodent-related conference in the Midwest! Purchase tickets today!</article>
				<a href="/blog" class="read-more-article">Read More</a>
			</li>
			<li>
				<h3>President Trump Vetoes Important Pro-Rodent Bill</h3>
				<article class="excerpt">In an indefensible and perplexing act on Thursday, President Trump vetoed a bill that would have provided free classroom guinea pigs to millions of first graders across the country. The president was unavailable for comment, but proponents of the bill suggest Trump’s decision was based largely on his general disdain for education, as well as his paralyzing fear of small animals.</article>
				<a href="/blog" class="read-more-article">Read More</a>
			</li>
		</ul>
	</section>

	<aside class="side-bar">
		<h2>Critter of the Month</h2>
		<img class="critter-pic" src="http://chris.house/images/chippy.jpg" alt="Critter of the Month - Chippy">
		<ul class="critter-info">
			<li>Name: Chippy</li>
			<li>Breed: Common Hamster</li>
			<li>Age: Unknown</li>
			<li>Favorite Pastime: Eating Broccoli</li>
			<li>SRSKC Member Since: 2017</li>
			<li>Owner: Nancy B.</li>
		</ul>
		<p class="nominate-text">Nominate your pet for Critter of the Month<br />
			<a href="/nominate" class="side-bar-button button">Apply Here</a>
		</p>
		
	</aside>

	<footer class="main-footer">
		<nav class="footer-nav">
 			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="/about">About</a></li>
				<li><a href="/join">Join</a></li>
				<li><a href="/care">Rodent Care</a></li>
				<li><a href="/bite">Bite Treatment</a></li>
				<li><a href="/contact">Contact</a></li>
			</ul>
		</nav>
		<p class="copyright">&copy; Copyright 2018 SRSKC All Rights Reserved</p>
	</footer>

</body>
</html>
            
          
!
            
              *{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: raleway, arial, sans-serif;
	width: 100%;
	margin: 0 auto;
	background-color: #f4eeea;
	display: grid;
	grid-template-columns: 12% auto 400px 12%;
	grid-template-rows: auto auto 950px auto auto auto;
	grid-template-areas: "top-bar     top-bar     top-bar     top-bar"
						 "main-header main-header main-header main-header"
						 "hero        hero        hero        hero"
						 ".           blog-posts  side-bar    ."
						 ".           news        side-bar    ."
						 "main-footer main-footer main-footer main-footer";
}

a{
	text-decoration: none;
}

.button{
	display: inline-block;
	color: white;
	text-shadow: 1px 1px black;
	font-size: 26px;
	border-radius: 4px;
	font-family: Oswald, arial, sans-serif;
	padding: 3px 35px;
}

.top-bar{
	grid-area: top-bar;
	background-color: #622b0d;
	color: white;
	height: auto;
	padding: 4px 12%;	
}

.top-bar a{
	float: right;
	color: white;
}

.top-bar .social-link{
	margin-right: 7px;
}

.top-bar .contact-link{
	margin-right: 26px;
}

.main-header{
	grid-area: main-header;
	padding: 12px 12%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.logo{
	color: #622b0d;
	font-size: 16px;
}

.logo span:nth-child(1){
	float: left;
	margin-left: -20px;
	margin-bottom: -10px;
}

.logo span:nth-child(2){
	clear: both;
	display: block;
	font-family: 'lobster two', serif;
	font-size: 34px;
}

.logo span:nth-child(3){
	float: left;
	margin-left: 143px;
	margin-top: -7px;
}

.main-nav ul, .footer-nav ul{
	list-style-type: none;	
}

nav ul li{
	float: left;
}

.main-nav ul li a{
	font-size: 18px;
	color: #c8825b;
	margin: 0 10px;
}

.hero{
	grid-area: hero;
	width: 100%;	
	padding: 55px 12% 0 12%;
	background-image: url('http://chris.house/images/hero.jpg');
	background-size: cover;
	background-position: center;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	grid-template-areas: ".       .  award"
						 "message .  .    "
						 ".       .  .    ";
}

.message{
	grid-area: message;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .5);
	padding-top: 110px;
	text-align: center;	
}

.message p{
	color: white;
	text-shadow: 2px 2px black;
	line-height: 1;
}

.message span:first-child{
	font-size: 42px;
}

.message span:last-child{
	font-size: 67px;
}

.message-button{	
	background-color: #c8825b;	
	margin-top: 25px;
}

.award{
	grid-area: award;
	text-align: center;
	color: white;
}

.award blockquote{
	font-size: 28px;
}

.award cite{
	display: block;
	text-align: right;
	font-style: italic;
	font-size: 18px;
}

.blog-posts{
	grid-area: blog-posts;
	margin-right: 90px;
}

.news{
	grid-area: news;
	margin-right: 90px;
}

.blog-posts h2, .news h2{
	font-size: 41px;
	color: #622b0d;
	font-weight: normal;
	padding: 65px 0 25px 0;
}

.news h2{
	padding-top: 15px;
}

.blog-posts h3, .news h3{
	font-size: 24px;
	font-weight: normal;
	padding-bottom: 10px;
}

.blog-posts ul, .news ul{
	margin-left: 40px;
}

.blog-posts li, .news li{
	margin-bottom: 50px;
}

.blog-date{
	color: #632b0d;
	font-size: 16px;
	padding-left: 5px;
}

.excerpt{
	font-size: 16px;
	margin-left: 20px;
}

.read-more-article{
	color: #c8825b;
	font-size: 16px;
	float: right;
}

.side-bar{
	grid-area: side-bar;
	background-color: #c8825b;
	padding: 45px 25px 0 25px;
	margin: 20px 0;
	color: white;
}

.side-bar h2{
	font-size: 41px;
	font-weight: normal;
	text-align: center;
	line-height: 1;
}

.critter-pic{
	margin: 30px 0 20px 0;
	width: 100%;
}

.critter-info{
	list-style-type: none;
	font-size: 21px;
}

.nominate-text{
	font-size: 26px;
	text-align: center;
	margin-top: 50px;
}

.side-bar-button{
	background-color: #632b0d;	
	margin-top: 15px;
}

.main-footer{
	grid-area: main-footer;
	background-color: #afafaf;
	padding: 25px 12%;
	color: white;
}

.footer-nav{
	float: left;
}

.footer-nav a{
	display: inline-block;
	font-size: 20px;
	color: white;
	padding: 0 12px;
	border-right: solid 1px white;
}

.footer-nav li:last-child a{
	border: none;
}

.copyright{
	float: right;
	font-size: 16px;
}

@media (max-width: 1600px) {
	body{
		grid-template-columns: 2% auto 400px 2%;
	}
	.top-bar{
		padding: 4px 2%;
	}
	.main-header{
		padding: 12px 2%;
	}
	.hero{
		padding: 55px 2% 0 2%;
	}
	.main-footer{
		padding: 25px 2%;
	}
}

@media (max-width: 1050px) {
	.main-header{
		flex-direction: column;
		align-items: center;
	}
	.main-nav{
		margin-top: 10px;
	}	
	.hero{
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-template-areas: "message"
							 "award";
		justify-content: center;
		padding: 55px 2%;
	}
	.message{
		background: none;
		height: auto;
		width: auto;
		padding-top: 25px;
	}
	.award{
		padding-top: 20px;
	}
	.side-bar{
		padding-bottom: 15px;
	}
	.news, .blog-posts{
		margin-right: 0;
	}
	.news h2, .blog-posts h2{
		font-size: 32px;
	}
	.news ul, .blog-posts ul{
		margin-left: 25px;
	}
	.excerpt{
		margin-left: 0;
	}
	body{
		grid-template-columns: 3% auto 3%;
		grid-template-rows: auto auto auto auto auto auto auto;
		grid-template-areas: "top-bar     top-bar     top-bar"
							 "main-header main-header main-header"
							 "hero        hero        hero"
							 ".           blog-posts  ."
							 ".           news        ."
							 ".           side-bar    ."
							 "main-footer main-footer main-footer";
	}
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console