Creating a Single Page CSS Website Without Images

April 19, 2012 at 5:05 pm By
Download Demo

Single page layouts are all the rage now, especially for portfolios. In this tutorial we’re going to be making something quite attractive that’ll work on a variety of platforms using no images, just CSS and Javascript. We’ll be making some awesome backgrounds too, using just Javascript. Let’s get started!

HTML Structure

To begin we’ll construct the HTML. The basic layout of this website is going to be a bunch of divs which represent each page, and then a header which sticks to the top of the page constantly, providing navigation.

To begin, lets lay down some ground work. Create 3 new files called index.html, style.css and javascript.js. Next, go and download jquery.js and put it in the same directory as these files. Then paste the following into index.html:


<html>
<head>

<!-- For mobile compatibility -->
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

<title>My Website!</title>

<!-- Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>


<!-- Fonts and CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Istok+Web:700|Bree+Serif' rel='stylesheet' type='text/css'>

</head>

After that we need to lay down the content. This obviously took more trial an error, but for ease you can just copy and paste it all. I’ve left a few comments so you can find your way around. I decided to make 4 pages: a home page, an about page, a page describing services and a contact form. I also threw in a few share buttons that follow the user around.

<body>

<!-- THE HEADER --->
<div id="header">
	<h1>InsertHTML</h1>
	<ul id="menu">
		<li><a href="#home">Home</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#services">Services</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
	
</div>

<!-- SHARE BUTTONS -->
<div class="share">
	<a href="https://twitter.com/share" class="twitter-share-button" data-via="inserthtml" data-size="large">Tweet</a>
	<div class="posit-g"><div class="g-plusone" data-annotation="none"></div></div>
</div>

<!-- THE HOME PAGE -->
<div data-full="true" id="home">
	<div class="is">.COM</div>
	<div class="content">
		<form class="newsletter" action="#" method="post">
			<div class="email">
					<input type="text" id="email-home" name="email" placeholder="[email protected]" />
			</div>
			<div class="submit">
				<input type="submit" id="submit-home" name="submit" value="GO" />
			</div>	
		</form>
	</div>
</div>

<!-- THE ABOUT PAGE -->
<div data-full="true" id="about">
	<div class="is">&nbsp; IS</div>
	<div class="content">
		<h2>A WEBSITE ABOUT</h2>
		<hr />
		<p>
			<span>Web Design <span class="amp">&amp;</span> </span> 
			<span>The Internet</span>
		</p>	
	</div>
	<div class="background"></div>
	<div class="background-2"></div>	
</div>

<!-- THE SERVICES PAGE -->
<div data-full="true" id="services">
	<div class="content">
		<div class="box-1">
			<h2>POTATOES</h2>
			<p>Before we started writing articles for the web, InsertHTML was a small potato farm just off the south coast of Ireland</p>
		</div>
		<div class="box-2">
			<h2>WEB DESIGN</h2>
			<p>We write articles about web design! That's our main thing. We hope you like them. If you want to learn more click below!</p>
			<a href="">LEARN MORE!</a>
		</div>
		<div class="box-3">
			<h2>AEROSPACE</h2>
			<p>Since January InsertHTML has been working hard with the US government to create a new type of fighter jet</p>
		</div>
	</div>
</div>

<!-- THE CONTACT PAGE -->
<div data-full="true" id="contact">
	<div class="content">
		<div class="form">
			<form action="#" method="post">
				<div class="form-name">
					<label for="name">NAME:</label>
					<input type="text" name="name" id="name" />
				</div>
				<div class="form-email">
					<label for="email-contact">EMAIL:</label>
					<input type="text" name="email" id="email-contact" /> 
				</div>
				<div class="form-website">
					<label for="website">URL:</label>
					<input type="text" name="website" id="website" />
				</div>
				<div class="form-text">
					<label for="text">COMMENT:</label>
					<textarea name="text" id="text"></textarea>
				</div>
				<div class="submit">
					<input type="submit" name="submit" id="submit-contact" value="GO" />
				</div>
			</form>
		</div>
	</div>
	<div class="background"></div>
</div>


<!-- SCRIPTS FOR THE SHARE BUTTONS -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html>

Now we can get onto how this is all actually going to work. If you check your index page now, you’ll notice not much is happening. We’re going to fix that with just Javascript and CSS. We’ll start with a little Javascript. We want each main div to be the full size of the screen, so we have the illusion of individual pages. I ran into some problems on the iPhone which meant that I had to increase the height slightly to compensate for the URL bar. Some of this stuff will add CSS classes, but we’ll get to that stuff later.

Javascript

We’re going to be using jQuery, as usual, to make the process a little easier. As you would expect, a one page layout brings with it a bunch of issues. Since we haven’t done the CSS yet some of these classes might seem a little foreign, but we’ll be adding those later. Open up your javascript.js file and lets get started.

Problem 1: Page Height

The first problem we face is that each div does not fit the entire window, so there is no illusion of separate pages. To remedy this we need to create a function that checks the window width and changes accordingly. Moreover I added some classes to the menu and header which will become more apparently useful later.

// Initiate jQuery
$(document).ready(function() {

	// Create a function 
	function getSize() {
		
		// Get the width and height of the window
		var winHeight = $(window).height();
		var winWidth = $(window).width();
		
		// Change the divs to that width and height
		$('[data-full="true"]').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
		
		// An exception for iPods and iPhones
		if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
			$('[data-full="true"]').css({'width' : winWidth+'px', 'height' : winHeight+70+'px'});
			$('#home').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
		}
			
		
		// Remove classes
		$('#menu a').removeClass('current');
		$('#header').removeClass('dark light');
		
		
		// Check what page we're on in the document using the height and
		// scroll postion (That's $(window).scrollTop())
		
		var currentPage = $(window).scrollTop() + 60;
		
		if(currentPage < winHeight) {
			// Add correct classes, repeat for different sizes
			$('#menu a[href="#home"]').addClass('current');
			$('#header').addClass('light');
		} else if(currentPage > winHeight && currentPage < winHeight*2) {
			$('#menu a[href="#about"]').addClass('current');
			$('#header').addClass('light');
		} else if(currentPage > winHeight*2 && currentPage < winHeight*3) {
			$('#menu a[href="#services"]').addClass('current');
			$('#header').addClass('dark');
		} else if(currentPage > winHeight*3 && currentPage < winHeight*4) {
			$('#menu a[href="#contact"]').addClass('current');
			$('#header').addClass('dark');

		}
	}	

Problem 2: Menu Clicking

We’ll run all the functions after the Javascript. Next we want to add a smooth scroll for when the user clicks on a menu item. At the end of the animation we append the correct hash to the URL to retain history control. Read the comments for more information!


	// When the user clicks a #header anchor
	$('#header ul li a').click(function() {
		// Get the hash of the anchor
		var hash = $(this).attr('href');
		// Get the offset (i.e. what height it is at on the document) plus 2 
		var offset = $(hash).offset().top+2;
		
		// Animate the document to scroll down slowly
		$('html,body').animate({scrollTop: offset},'slow', function() {
			// When the scrolling is done, change the hash accordingly.
			window.location.hash = hash;
		});
		// Override default behaviour (so clicking the link wont automatically jump to the hash
		return false;	
	});

Problem 3: Header Position

Now as the user scrolls, we want the header to follow. I initially set the header to fixed in CSS, so it was fixed to the top, but I ran into some unforeseen issues on iPhones and iPads. This also gives the added illusion of the header trying to keep up with the user scrolling


	// When the user is scrolling
	$(window).scroll(function() {
		// Assuming they aren't scrolling beyond the document (mobile issue)
		if($(window).scrollTop() < $(window).height()*3.5) {
			// Change the header position so it's always attached to the top of the document
			$('#header').stop().animate({'top' : $(window).scrollTop()+'px'}, 20);
		}
	});

Problem 4: User Resizing

As the user resizes the window, the document wont adjust accordingly. In fact, some odd scrolling behaviour occurs where the pages will resize but the user will end up halfway between two pages. To fix this we need to make sure as the user resizes the page the scroll position doesn’t change from what it is currently. To do this we check the hash and depending on it, the scroll position is maintained.


	// When the user resizes the winow
	$(window).resize(function() {
		// Get the hash and height
		var hash = window.location.hash;
		var height = $(window).height();
		
		// Maintain scroll position based on hash.
		if(hash == '#home') { $(window).scrollTop(0); }
		else if(hash == '#about') { $(window).scrollTop(height); }
		else if(hash == '#services') { $(window).scrollTop(((height)*2)); }
		else if(hash == '#contact') { $(window).scrollTop((height*3)); }

	});

We have a bit more Javascript to do, but we’ll move onto the CSS for now. Finish off by running the function and closing the jQuery function.


	getSize();
	$(window).resize(getSize);
	$(window).scroll(getSize);

});

Some Rudimentary CSS

Open up your style.css file. To begin we’ll style the header and body. We want to disable scrolling via CSS. This won’t work on iPhone or iPad (I haven’t tested scrolling on Android), but generally that’s a good thing, since the menu bar can act quite oddly on iPhone. This gives touch screen users greater freedom that they may need.

html, body {
	overflow: hidden; /* Disable scrolling */
}

body {
	/* Remove margins and all that */
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

#header {
	width: 100%;
	position: absolute;
	z-index: 500000;
}

#header ul {
	list-style: none;
	margin: 40px 20px 20px 20px;
	font-family: Arial, sans-serif;
	padding: 0 10px;
	float: right;
	font-weight: bold;
	border-radius: 10px;
}

#header ul li {
	float: left;
	padding: 10px;
	text-transform: uppercase;
}

#header ul li a {
	text-decoration: none;
	padding: 10px;
}

.light .current {
	background: #000;
	border-radius: 5px;
}

.dark .current {
	background: #fff;
	border-radius: 5px;
}

.dark h1, .dark ul li a {
	color: #000;
}
.light h1, .light ul li a {
	color: #fff;
}

#header h1 {
	padding: 0 0 0 20px;
	font-family: 'Bree Serif', Georgia, serif;
	text-transform: uppercase;
	font-size: 3.5em;
	margin: 20px 0 0 0;
	float: left;
	font-weight: lighter;
	letter-spacing: 1px;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

.share {
	position: fixed;
	bottom: 20px;
	z-index: 5000;
	right: 20px;
}

.twitter-share-button {
	float: left;
}

.posit-g {
	position: relative;
	right: 15px;
	top: 4px;
	float: left;
}

/* For writing after the logo */
.is {
	font-family: 'Bree Serif', Georgia, serif;
	font-size: 3.5em;
	position: relative;
	display: inline-block;
	left: 365px;
	top: 20px;
	color: #fff;
}

/* Position the content below the header */
.content {
	position: relative;
	top: 130px;
}

Next lets style the home page. There’s nothing too difficult here, just some background and form elements. I’ve also styled the submit button, which will appear later on too, so ignore the #contact bit for now.

/* ----- HOME PAGE ----- */

#home {
	background-color: #3097b9;
	box-shadow: inset 0 250px 600px #59C1D9, 0px 0px 60px rgba(0, 0, 0, 0.4);
	position: relative;
	z-index: 500;
}

.newsletter {
	width: 50%;
	margin: 0 auto;
}

#home .email {
	background: #fff;
	width: 76%;
	padding: 0 2% 0 0;
	overflow: hidden;
	float: left;	
	height: 65px;
	z-index: 500;
	margin: 0px;
	border-radius: 8px 0 0 8px;
	position: relative;
	box-shadow: 0px 8px 0px #aaa, 0px 4px 10px rgba(0,0,0,0.1), inset 0px -20px 30px -10px rgba(0,0,0,0.05);
}


#home .email input {
	width: 95%;
	padding: 3px 10px;
	height: 59px;
	border: 0;
	border-radius: 8px;
	outline: 0;
	font-size: 2em;
	position: relative;
}

.submit {
	position: relative;
	height: 65px;
}
.submit input {
	margin: 0;
	width: 21%;
	height: 100%;
	font-weight: bold;
	color: #fff;
	font-size: 2em;
	border: 0;
	-webkit-appearance: none;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2), 0px 8px 0px #cd5b0f;
	border-radius: 0 8px 8px 0;
	display: block;
	position: relative;
	padding: 5px 0 0;
	background: #f38e4a;
	
}

.submit input:hover {
	border: 0 !important;
}

.submit input:active, #contact .submit input:active {	
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2), 0px 3px 0px #cd5b0f, inset 5px 0 10px rgba(0,0,0,0.1);
	top: 5px;
}

Before we continue, lets take a look at some background ideas I was toying with in Javascript

Javascript Backgrounds

I decided instead of using any images I’d accomplish the backgrounds with just Javascript. These are optional, so don’t put these in if you don’t want to. They will significantly slow down scrolling between pages in some cases. The first idea is a bunch of circles that create a sort of Bokeh effect. This is for the about page. The second is going to create rows of triangles. They wont look like triangles or circles for now, but we’ll be able to change that using CSS. I’ve outlined how these functions work in the comments. These may slow down animations. You may wish to alter these to fix that.


	// ABOUT PAGE
	
	function aboutPage() {
		// Get the width and height of the about page, and divide the height by 4
		var aboutWidth = $('#about').width();
		var aboutHeight = $('#about').height() / 4;
			
		// Run a loop that adds circles
		for(var noCircles = 65; noCircles > 0; --noCircles) {
			
			// Get a random co-ordinate, random size, and a random opacity
			var randX = Math.floor(Math.random() * (aboutWidth + 1)) - 20;
			var randY = Math.floor(Math.random() * (aboutHeight + 1)) - 20;
			var randNo = Math.floor(Math.random() * 49) + 20; // Random height/width
			var randOp = (Math.floor(Math.random() * (10)) + 1) / 10;
				
			// Get more random co-ordinates for the second background element
			var randX2 = Math.floor(Math.random() * (301));
			var randY2 = Math.floor(Math.random() * (111));
			
			// Fill the two background divs with circles. We use two because
			// It allows for a certain amount of room if the user resizes the window
			$('#about .background').append('<span class="circle" style="width: '+randNo+'px; height: '+randNo+'px; opacity: '+randOp+'; bottom: '+randY+'px; left: '+randX+'px"></span>');
			$('#about .background-2').append('<span class="circle-2" style="width: '+randNo+'px; height: '+randNo+'px; opacity: '+randOp+'; left: '+randY2+'%; top: '+randX2+'px"></span>');
		}
		
	}
	
	// CONTACT PAGE 
	
	function contactBackground() {
		
		// The number of layers we'll be working with
		var layers = 9;
		
		// The window width and the number of triangles we should use.
		var theWidth = $(window).width();	
		var numberTri = Math.ceil(theWidth / 60);	
		
		// Run a loop to add some 'layer' divs based on the number of layers
		for(var i = 0; i < layers; ++i) {
			$('#contact .background').append('<div class="layer"></div>');
		}	
		
		// Then add some triangles to each div
		$('#contact .background .layer').each(function() {
			
			// Overcompensate so that the triangles dont abruptly end
			var newWidth = numberTri * 60;
			
			// Then change the CSS for the layer based on the number of triangles
			$(this).css({'width' : newWidth+300+'px'});
			// Append spans (that act as triangles) as needed
			for(var j = 0; j < (numberTri/2)+2; ++j) {
				$(this).append('<span></span>');
			}
			// Reduce number of triangles for the next layer
			numberTri = Math.ceil(numberTri - 1);
			
		});
		
	}
	
	contactBackground();
	aboutPage();

More CSS

I brought up the Javascript background functions because we’re just about to get onto them. Lets begin styling the about page.

/* ----- ABOUT PAGE ----- */

/* The background */
#about {
	background-color: #3b3b3b;
	box-shadow: inset 0px -40px 60px -30px rgba(0, 0, 0, 0.4); /* Box shadow acting like a gradient */
	position: relative;
	overflow: hidden;
}

/* Change the background into circles */
.circle, .circle-2 {
	display: block;
	border-radius: 200px;
	box-shadow: 0px 0px 100px rgba(255,255,255,0.3), inset 0px 0px 10px rgba(255,255,255,0.2);
	position: absolute;
	background: #fff;
}

/* The content */
#about .content {
	margin: 20px 0 0 20px;
	color: #fff;
	width: 420px;
	top: 0;
	font-family: 'Bree Serif', Georgia, serif;
}

/* Text related */
#about .content h2 {
	font-size: 3em;
	font-weight: lighter;
	text-align: justify;
	letter-spacing: 1.5px;
	margin: 5px 0;
}

#about .content p {
	position: relative;	
}

#about .content p span {
	display: block;
	font-size: 3.7em;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

#about .content p span.amp {
	display: inline;
	font-size: 1em;
	color: #f38e4a;
}

/* Line break */
#about hr {
	border: 0;
	border-bottom: 10px solid #000;
	width: 413px;
	margin: 20px 0;
}

/* Positioning of the secondbackground */
#about .background-2 {
	width: 40%;
	position: absolute;
	bottom: 0;
	height: 300px;
	right: 0;
	z-index: 1000;
}

Now onto the services page! This is all pretty straight forward CSS, so it shouldn’t be too hard to understand. The services page just consists of 3 boxes floating, explaining what the website is about. I set up the media queries (see later) to hide the two peripheral boxes when the screen gets too small. The best idea is to put your main content in the center box (box-2) and add some additional information to the sides, which could be later expanded upon (for instance, when the user clicks ‘learn more’).

/* ----- SERVICES PAGE ----- */

#services {
	background-color: #a3f226;
	/* Again, this gradient acts as a background */
	box-shadow: inset 0 250px 600px #c5f972, 0px 0px 60px rgba(0, 0, 0, 0.4); 
}

#services .content {
	width: 80%;
	margin: 0px auto;
}

#services .content div {
	background-color: #f2fce1;
	border: 2px solid #b3e361;
	border-radius: 8px;
	width: 30%;
	height: 400px;
	padding: 3%;
	height: 60%;
	float: left;
	/* Border-box so borders dont affect width */
	box-sizing: border-box;
	margin-right: 3%;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
}

#services .content .box-2 {
	position: relative;
	z-index: 500;
}
#services .content a {
	width: 100%;
	background-color: #2caccb;
	padding: 10px 0;
	color: #fff;
	font-family: 'Istok Web', sans-serif;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	display: block;
	box-shadow: inset 0 10px 20px rgba(255,255,255,0.2);
}

#services .content a:hover {
	box-shadow: inset 0 -10px 20px rgba(255,255,255,0.2);	
}

#services a:active {
	box-shadow: inset 0 -10px 20px rgba(255,255,255,0.2), inset 0px 0px 10px rgba(0,0,0,0.1);	
}

#services .content h2 {
	margin: 0; padding: 0 0 10px 0;
	border-bottom: 5px solid #e2ead0;
	font-family: 'Istok Web', sans-serif;
	text-transform: uppercase;
	font-variant: normal;
}

#services .content p {
	line-height: 20px;
	font-size: 0.9em;
	text-align: justify;
	color: #656565;
	text-decoration: none;
}

And finally we just have to style the #contact page. This isn’t too hard either, although forms always do prove to be quite lengthy. Again, nothing too tricky here, just a some basic CSS properties.

#contact {
	background: #eee;	
	box-shadow: inset 0 250px 600px rgba(255,255,255,0.5);
	position: relative;
	overflow: hidden;
}

#contact .content {
	margin: 0px auto;
	width: 75%;
}


#contact .form {
	padding: 2%;
	width: 96%;
	box-sizing: border-box;
	float: left;
	box-shadow: 0 0 35px rgba(0,0,0,0.1);
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	position: relative;
	z-index: 500;
	font-family: Arial, sans-serif;
}

#contact .form-name input,
#contact .form-email input,
#contact .form-website input {
	background: #fff;
	border-radius: 5px;
	border: 1px solid #ccc;
	box-shadow: inset -1px 3px 10px rgba(0,0,0,0.05);
	padding: 2%;
	margin: 0;
	font-size: 1.2em;
	width: 66%;
	box-sizing: border-box;
}

.form-text {
	width: 80% !important;
	box-shadow: 0px 8px 0px #ccc;
	border-radius: 0 0 0 8px;
}

.form textarea {
	background: #fff;
	width: 100%;
	padding: 0 4px 0 0;
	float: left;	
	height: 121px;
	padding: 2%;
	font-size: 1.5em;
	resize: none;
	box-sizing: border-box;
	display: block;
	z-index: 500;
	border: 1px solid #ccc;
	border-bottom: 0;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	position: relative;
}

.form textarea:focus {
	outline: 0;
}

#contact .form label {
	display: block;
	padding: 10px 0 0 0;
	width: 20%;
	color: #aaa;
	font-weight: bold;
	float: left;
	text-decoration: none;
}

#contact .form-text label {
	width: 100%;
	margin: 0 0 15px 0;
}

#contact .submit {
	float: left;
	width: 30% !important;
}

#contact .form div {
	margin: 10px 0;
	width: 50%;
	float: left;
}

#contact .form input:hover {
	border: 1px solid #25abd8;
}
#contact .form input:focus {
	outline: 0;
	border: 1px solid #d82525;
}

#contact .submit input {
	margin: 44px 0 0 0;
	height: 121px;
	width: 100% !important;
	box-shadow: 0 8px 0 #1a6d8a;
	background-color: #4bbae1;
}

#contact .submit input:active {
	box-shadow: 0px 3px 0px #1a6d8a, inset 5px 0 10px rgba(0,0,0,0.1) !important;
}
#contact .submit {
	width: 20% !important;
}

For the #contact page the background is quite unique, so I’ve decided to explain it a little more in depth. The background consists of triangles, which are created using a div of size 0x0, and giving it a one sided large border. This gives the illusion that it’s a triangle, but really its a dot with a huge border. This raises some issues with positioning, so as you’d expect the positioning is a little weird, and if you decide to change the Javascript you might run into some problems. I’ve added enough support for the 9 layers we used earlier, if you want more you’ll have to add them manually.

#contact .background {
	position: absolute;
	bottom: 0;	
	right: 0;
}
// This bit creates the triangle.
#contact .background span {
	border: 60px solid;
	border-color: transparent transparent black transparent;
	width: 0;
	float: left;
	height: 0;
}

// The default position
#contact .background .layer {
	position: absolute;
	right: -60px;
	bottom: 0;
}

// Positioning can be tricky! I also altered the opacity here.
#contact .background .layer:nth-of-type(2) { bottom: -60px; opacity: 0.88; }
#contact .background .layer:nth-of-type(3) { bottom: 60px; right: -120px; opacity: 0.76; }
#contact .background .layer:nth-of-type(4) { bottom: 0px; right: -120px; opacity: 0.64; }
#contact .background .layer:nth-of-type(5) { bottom: 120px; opacity: 0.52; }
#contact .background .layer:nth-of-type(6) { bottom: 60px; opacity: 0.40; }
#contact .background .layer:nth-of-type(7) { bottom: 180px; right: -120px; opacity: 0.28; }
#contact .background .layer:nth-of-type(8) { bottom: 120px; right: -120px; opacity: 0.14; }
#contact .background .layer:nth-of-type(9) { bottom: 240px; opacity: 0.02; }

// Invert the triangles on the even rows.
#contact .background .layer:nth-child(even) span {
	border-color: black transparent transparent transparent;
}

And that’s it! Everything looks great, right? Well, that really depends on your screen size and operating system.

Screen Specific CSS

We might run into some problems on smaller screens, so to remedy this we need some media specific CSS. The best idea here is to do as much as you can outside the media tags. Sometimes though, that’s easier said than done. For small screens (below 1000px) I’ve altered things so that they are more viewable. For mobile screens, I had to step this up a little and change font sizes, amongst other things.


/* For smaller screens */
@media (max-width: 960px) {
	.content { top: 160px !important; }
	#about .content { margin: 0px auto; }
	.is { display: none; }
	#header h1 {
		width: 100%;
		text-align: center;	
		padding: 0;
	}
	#header ul {
		float: none;
		margin: 0px auto;
		width: 380px;
		top: 10px;
	}
	#header ul li { padding-left: 0; }
	#header ul li:last-of-type { padding-right: 0; }
	#contact .form { padding: 4%; }
	#contact .form div { width: 100%; }
	#contact .form div input { width: 80%; }
	#services .content { width: 95%; }
	#services .content div {
		margin: 0 2% 0 0;
		width: 31%;
	}
}

/* For mobiles */
@media (max-width: 700px) {
	.share { display: none; }
	.content { top: 130px !important; }
	#header h1 { font-size: 2.2em;	 }
	#header ul {
		position: relative;
		top: 10px;
		width: 300px;
		margin: 0px auto;
		font-size: 0.8em;
	}
	#home .newsletter { width: 80%; }
	#about .background, #about .background-2 { display: none; }
	#services .content {
		width: 100%;
		float: left;
	}
	#about .content { width: 100%; }
	#about .content h2 {
		font-size: 2em;
		text-align: center;
	}
	#about .content p span {
		font-size: 2.6em;
		text-align: center;
	}
	#about .content hr { display: none; }
	#services .box-1, #services .box-3 { display: none; }
	#services .content .box-2 {
		width: 80%;
		margin: 0px auto;
		float: none;
	}
	#contact .content, #contact .form { width: 100%; }
	#contact label[for=text] { display: none; }
	#contact .submit input { margin: 0; }
	#contact .form label { padding: 5px 0 0 0; }
	#contact .form-name input,
	#contact .form-email input,
	#contact .form-website input {
		font-size: 0.9em;
		padding: 1%;
	}
}

Support

Now we really are done. Hopefully none of this has been too hard for you! The support is actually pretty good, with most browsers being able to render a lot of it successfully. Obviously there will be variations from browser to browser, but thankfully they aren’t too large. Full support probably begins at Internet Explorer 9. All of browsers shouldn’t be a problem thanks to auto-updating.

Webkit Gecko Trident Presto
Support Latest Version Latest Version Latest Version Latest Version

Usage

You can edit this any way you want, and use it anywhere you want for free! If you want to you can link back to this article, but it’s not mandatory. If you really want to support us, tweet this article or share it. Have a good day!