personal blastprocessor recreation

by panchroma

HTML

<script src="    http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<body class="home" >


	<!-- HERO  -->
    <div class="heroWrap">
	<section class="hero" data-spy="affix" data-offset-top="100">
	
	  		<div class="container">
	  		
	  			<div class="masthead row-fluid">
	  			
	  				<div class="span12">
							
						<a class="brand" href="#">Blast Processor</a> 
					</div>
					
				</div>
	  		
	  			<div class="row-fluid">
	
					<div class="span12">	
						<h1><span>WE ARE A CREATIVE APP COMPANY</span></h1>
						
						<a class="back-to-top" href="#">Back to the top</a>
						
						<ul class="nav unstyled" >
							<li ><a href="#work">Work</a></li>
							<li ><a href="#what-we-do">What we do</a></li>
							<li ><a href="#who-we-are">Who we are</a></li>
							<li ><a href="#contact">Contact</a></li>
						</ul>
						 
					</div>
					
					
					
				</div>
	  			
	  		</div>
	</section>
    </div><!-- end heroWrap -->
	
	<!-- INTRO -->
	<section class="intro">
		<div class="container">
			<div class="row-fluid">
				<div class="span12">	
					<h2 ><strong>Blast Processor</strong> are an independent creative app company based in Brighton, UK. We produce apps, games and everything in-between for broadcasters, brands and publishers.</h2>
				</div>
			</div>
			
		</div>
	</section>
	
	<!-- WORK -->
	<section class="work" id="work">
		<div class="container">
			<div class="row-fluid">
				<div class="span12">	
					<h3>Work</h3>
				</div>
			</div>
			
			<div class="row-fluid project">
				<div class="span7">	
					<img src="img/hipmap.jpg"  />
				</div>
				<div class="span5">	
					<h4>Notes</h4>
					<p >
left and right padding on page body has been removed. This lets backgrounds extend full width</p>

<p >text content sections are then wrapped in a div which then reapplies this side...

CSS

/* Remove default body padding so backgrounds extend full width*/
body{ 
    padding-left:0 !important;
    padding-right:0 !important;
    } 
.heroWrap{
        height:200px;
    background-color:#b32d45 !important;
}

.hero{
background-color:#b32d45 !important;
}

/* fix jump to right on affix */
section.hero.affix{
    margin-left:-20px;
}

/*affix hero section */
.hero.affix{
    top:-120px;
    width:100%;
     background-color:#b32d45 !important;
}
        
 .container{
    border:solid  1px grey;
}



/* wrap all page content in section divs and replace side padding */
section{
    padding-left:20px;
    padding-right:20px;
    background-color:salmon;
}


/* ----------- */
/* Nav Styling */
/* ----------- */

ul.unstyled, ol.unstyled {
margin-left: 0;
list-style: none;
}

.nav {
margin: 26px 0 26px;
-webkit-transition: all .2s ease-in-out;
}

.nav li, .nav li a {
display: inline;
margin: 0 1% 0 1%;
color: olive;
}

/* */
/* Collapse Nav bar to single column on mobile */
/* */
@media (max-width: 500px) {
    
    .nav li a {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .1em;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
padding: 0 20px 0 12px;
display: inline-block;
width: 80%;
background: 
rgba(0,0,0,0.1);
margin-bottom: 5px;
}

}